javascript - 如何制作 Ajax 联系表单

Question

附注编辑删除不必要的代码

你能告诉我我在这里做错了什么吗？错误日志没有显示任何内容。

这是我的 html、js 和 php。

示例.js

        // this is to prevent page refresh, right?        
        stepsForm.prototype.options = {
    		onSubmit : function() { return false; }
    	};

    	// submits the form, but i add some js in sample.html, so this one will not work.
    	stepsForm.prototype._submit = function() {
    		this.options.onSubmit( this.el );
    	}

sample.html

<div class="container">

  <section>
    <form id="theForm" class="simform" autocomplete="off" action="form-process.php">
      <div class="simform-inner">
        <ol class="questions">
          <li>
            <span><label for="q1">What's your name / full name?</label></span>
            <input id="q1" name="q1" type="text" />
          </li>
          <li>
            <span><label for="q2">What's your email address?</label></span>
            <input id="q2" name="q2" type="text" data-validate="email" />
          </li>
          <li>
            <span><label for="q3">What's your phone number?</label></span>
            <input id="q3" name="q3" type="text" data-validate="phone" />
          </li>
          <li>
            <span><label for="q4">Type your question below?</label></span>
            <input id="q4" name="q4" type="text" />
          </li>
        </ol>
        <!-- /questions -->
        <button class="submit" type="submit">Send answers</button>
        <div class="controls">
          <button class="next"></button>
          <div class="progress"></div>
          <span class="number">
    								<span class="number-current"></span>
          <span class="number-total"></span>
          </span>
          <span class="error-message"></span>
        </div>
        <!-- / controls -->
      </div>
      <!-- /simform-inner -->
      <span class="final-message"></span>
    </form>
    <!-- /simform -->
  </section>
</div>
<!-- /container -->
<script src="js/classie.js"></script>
<script src="js/stepsForm.js"></script>

<!-- this is the script that will replace the one in the sample.js -->
<script>
  var theForm = document.getElementById('theForm');

  new stepsForm(theForm, {
    onSubmit: function(form) {
      classie.addClass(theForm.querySelector('.simform-inner'), 'hide');
      var name = $("#q1").val();
      var email = $("#q2").val();
      var number = $("#q3").val();
      var message = $("#q4").val();

      $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        url: "form-process.php",
        data: JSON.stringify({
          name: name,
          email: email,
          number: number,
          message: message
        }),
        success: function(response) {
          var data = response.d;
          var messageEl = theForm.querySelector('.final-message');
          messageEl.innerHTML = 'Thank you! We\'ll be in touch.';
          classie.addClass(messageEl, 'show');
        }
      });
    }
  });
</script>

示例.php

 $EmailTo = "mail@mail.com";
    $Subject = "New Message Received";

    // prepare email body text
    $Body = "";
    $Body .= "Name: ";
    $Body .= $name;
    $Body .= "\n";
    $Body .= "Email: ";
    $Body .= $email;
    $Body .= "\n";
    $Body .= "Phone Number: ";
    $Body .= $number;
    $Body .= "\n";
    $Body .= "Message: ";
    $Body .= $message;
    $Body .= "\n";

    // send email
    $success = mail($EmailTo, $Subject, $Body, "From:".$email);

    // redirect to success page

所以这个过程的步骤是从html获取输入，用ajax(js)处理它，然后将其发送到sample.php邮寄，对吗？但我似乎无法通过ajax进程或sample.php。我的代码导致空白页面并且没有外发电子邮件。

由于我是 php 和 js 的新手，所以我主要对源代码进行逆向工程以使其适合我。这次我采用了codrops的“极简表单界面”。

这也是我在 SO 中的第一篇文章，所以请保持温柔:)

Answer 1

您选择了一个非常复杂的示例。这是一个更简单的 AJAX 联系表单，可供学习。

index.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/index.js" type="text/javascript"></script>

<!--  Whatever code you have above the contact form  -->

<!--  A very simple contact form -->
<div id="frmContact">
    Name: <input id="name" type="text" />
    Email: <input id="email" type="text" />
    Comment: <textarea id="comment" rows="4" cols="40"></textarea>
    <button id="mybutt">Send</button>
</div>

index.js

$(document).ready(function(){
    $('#mybutt').click(function(){
        var na = $('#name').val();
        var em = $('#email').val();
        var cm = $('#comment').val();

        if (na=='' || em=='' || cm==''){
            alert("Please complete all fields");
            return false;
        }

        $.ajax({
            type: 'post',
             url: 'your_php_ajax_file.php',
            data: 'na='+na+'&em='+em+'&cm='+cm,
            success: function(d){
                if (d.length) alert(d);
            }
        }); //END ajax
    }); //END #mybutt.click
});

your_php_ajax_file.php

<?php

    function sanitize($data) {
        return htmlentities(strip_tags(mysql_real_escape_string($data)));
    }

    // sanitize your inputs 
    $na = sanitize($_POST['na']);
    $em = sanitize($_POST['em']);
    $cm = sanitize($_POST['cm']);

    $dt = date('Y-M-d H:i:s');

    $body = '
        <div style="width:100%;text-align:center;margin:0 0 30px 0;font-family:Arial;font-size:30px;font-weight:bold;">Website Contact Form</div>
        <div style="text-align:left;margin:10px 0;font-family:Arial;font-size:22px;">'.$dt.'</div>
        <div style="text-align:left;margin:10px 0;font-family:Arial;font-size:22px;">'.$na.'</div>
        <div style="text-align:left;margin:10px 0;font-family:Arial;font-size:22px;">'.$em.'</div>
        <hr style="color:#cccccc;">
        <div style="text-align:left;margin:10px 0;font-family:Arial;font-size:22px;">'.$cm.'</div>
    ';


    $headers = "";
    $headers .= "Content-type: text/html; charset=iso-8859-1\n";
    $headers .= "From: website@example.com\n";
    $headers .= "Organization: example.com\n";
    $headers .= "X-Priority: 3\n";
    $headers .= "X-Mailer: PHP". phpversion() ."\n" . PHP_EOL;
    $msg = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">';
    $msg .= $body;

    mail($to, $subject, $msg, $headers);
    mail('youremail@hotmail.com', 'Contat form', $msg, $headers);

    echo 'Contact form sent';

<小时/>

关于 AJAX，这里有一些了解 AJAX 基础知识的好帖子:

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

注意:请注意，PHP AJAX 处理器 代码不能是您调用它的同一 PHP 文件(例如 index.php)的一部分(否则它将无法工作，并且整个页面将作为“ajax 响应”回显给您)