我的表单通过 Ajax 到 PHP 有什么问题？答案

【问题标题】：What is wrong with my form via Ajax to PHP?我的表单通过 Ajax 到 PHP 有什么问题？
【发布时间】：2014-09-10 17:42:30
【问题描述】：

一直在搜索这个站点并找到许多 AJAX 到 PHP 的示例，但是按照这些我无法理解为什么我的脚本无法正常工作。

我有一个带有按钮的 HTML 表单。您单击它调用 Bootstrap 模式窗口的按钮。您输入一个电子邮件地址点击提交。

它发布到一个 PHP 文件，该文件将通过电子邮件发送给我。

我使用 AJAX 实现的原因是因为我不希望 ACTION 和 METHOD 在表单上提交。我想通过 AJAX 提交，这样用户就不会被重定向到我的 PHP 页面。

这是我的 HTML：

<!DOCTYPE html>
<html>
 <head>
       <title>test</title>
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">  </script>
       <link href="css/bootstrap.min.css" rel="stylesheet">
       <link href="css/styles.css" rel="stylesheet">

    <script>
    $(document).ready(function () {
        $("button#submit").click(function(){            
            $.ajax({
                type: "POST",
                url: "email.php", // 
                data: $('form.icontact').serialize(),
                success: function(msg){
                    $("#thanks").html(msg)
                    $("#contact").modal('hide');    
                },
                error: function(){
                    alert("failure");
                }
            });
        });
    });
</script>
 </head>
 <body>          
        <div class="container"> <!-- numbers cannot total more than 12 for rows-->
        <div id="thanks"><p><a href="#contact" data-toggle="modal" class="btn btn-success">Submit!</a></p></div>            

        </div>

        <!--contact modal-->
        <div class="modal fade"id="contact" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form class ="form-horizontal" name="icontact" id="icontact">
                       <div class="modal-header">
                          <h4>testemail</h4>
                       </div>
                       <div class="modal-body">
                       <p>Please enter your email address and click submit to receive     your free first chapter</p>
                         <div class="form-group">
                            <label for ="contact-email" class="col-lg-2 control-label">Email: </label>
                            <div class="col-lg-10">
                               <input type="email" class="form-control" id="fromaddress" placeholder="new@example.com" name="fromaddress" />
                               <input type="hidden" id ="subject" value="enter in your email" name="subject" />
                            </div>
                         </div>

                       </div>
                       <div class="modal-footer">
                        <a class="btn btn-default" data-dismiss="modal">Cancel</a>
                       <button class="btn btn-primary" type="submit" id="submit">Send</button>


                       </div>
                   </form>
                </div>
            </div>
        </div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
        <script src="js/bootstrap.js"></script>
 </body>

这里是 php 文件。我在运行它时失败了，它像 GET 一样在 URL 中传递数据。我究竟做错了什么？

<?php

function spamcheck($field) {
  // Sanitize e-mail address
  $field=filter_var($field, FILTER_SANITIZE_EMAIL);
  // Validate e-mail address
  if(filter_var($field, FILTER_VALIDATE_EMAIL)) {
    return TRUE;
  } else {
    return FALSE;
  }
}

if (isset($_POST["fromaddress"])) {
    // Check if "from" email address is valid
    $mailcheck = spamcheck($_POST["fromaddress"]);
    if ($mailcheck==FALSE) {
     echo "Invalid input";
    } else {
      echo "<span class=\"alert alert-success\" >Your message has been received. Thanks!</span><br><br>";

  $from = strip_tags($_POST["fromaddress"]); // sender
  $subject = strip_tags($_POST["subject"]);
  $message = "Thanks.";
  // message lines should not exceed 70 characters (PHP rule), so wrap it
  $message = wordwrap($message, 70);
  // send mail
  mail("test@test.com",$subject,$message,"From: $from\n");

    }
  }


?>

【问题讨论】：

$('form.icontact').serialize() 首先应该是 $('#icontact').serialize()
$("button#submit").click( 你不应该依赖用户点击按钮来提交表单——这不是提交表单的唯一方式。始终收听提交$('#icontact').submit(function(){})
另一件事 - 你已经把你的 javascript 包含在它们所属的地方，但出于某种原因，<head> 中的程序脚本。它属于</body>之前的includes之后。
感谢所有这些 cmets 他们解决了我的问题。

标签： php ajax twitter-bootstrap modal-dialog

【解决方案1】：

问题是，您的表单以任何一种方式提交。您没有阻止提交按钮的默认行为。即提交表单并重定向到表单操作。

做这样的事情

$("button#submit").click(function(e){
    e.preventDefault(); // This line avoids the default submit event.

    //Rest of stuff as you have it.....
});

更好的选择是在 .submit() 而不是 .click() 上进行 AJAX 调用，如下所示

$("form#icontact").submit(function(e){
    e.preventDefault();

    //Proceed with other stuff as is...

});

希望这会有所帮助！ :)

【讨论】：

他们总是忘记 e.preventDefault(); :)