Question

我正在处理一个简单的ajax邮件，我的html看起来像这样：

<form id="contact_form">
        <input name="name" id="name" placeholder="[ NAME ]" type="text"> <br />
        <input name="company" id="company" placeholder="[ COMPANY ]" type="text"> <br />
        <input name="designation" id="designation" placeholder="[ DESIGNATION ]" type="text"> <br />
        <input name="phone" id="phone" placeholder="[ PHONE ]" type="text"> <br />
        <input name="email" id="email" placeholder="[ EMAIL ]" type="text"> <br />
        <textarea name="message" id="message" rows="4" cols="50" style="color:#FFF;" Placeholder="[ HOW CAN WE HELP? ]"></textarea><br />
        <input type="submit" id="submit_btn" value="Submit" style="width:262px; height:30px;"> 
        <div id="result" style="background-color:#7A706B; color:#FFF; text-align:center; width:280px; height:250px; position:absolute; left:10px; top:30px; padding-top:100px; display:none; font-size:16px;"> You Expressed. We Understand.<br /><br />[Welcome to the world of business innovation]<br /><br />You’ll be clarified shortly…</div>
        </form>

我的jquery看起来像这样：

$(function() {
$("#submit_btn").click(function(){
var data = {
    name: $("#name").val(),
    company: $("#company").val(),
    designation: $("#designation").val(),
    phone: $("#phone").val(),
    email: $("#email").val(),
    message: $("#message").val()
};
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "mail.php",
data: data,
cache: false,
success: function(result){ 
  $( "#result" ).fadeIn(1000);
}
});
});
});

问题是当我点击提交按钮时，它会显示地址栏中的所有数据，而不是通过POST方法将其发送到mail.php。

PS：当我使用alert（）而不是$（＆＃34;＃result＆＃34;）.fadeIn（1000）;它工作正常。

任何人都可以帮忙吗？感谢。

Answer 1

您需要取消提交并使用提交事件而不是点击

$(function() {
  $("#contact_form").on("submit",function(e){

    e.preventDefault(); // will cancel the submit even if errors below

    // rest of code

  });
});

评论者注意：

提交按钮的有效用例是按Enter键将触发提交处理程序。这通常很有用。如果你不想输入提交，那么确实按下按钮type =按钮并将ajax处理程序指定给单击此按钮而不是提交。

Answer 2

添加e.preventDefault（）;点击回拨：

$("#submit_btn").click(function() {
    e.preventDefault();
    // ...
});

Answer 3

尝试输入绝对网址而不是url: "mail.php"。以及return false;回调结束时的click(function(){});。

Answer 4

三分

您必须通过event.preventDefault()
侦听提交事件而非点击事件
使用.serialize()方法收集数据

第一点是您的代码工作所必需的;另外两个是推荐。

$(function() {
    $("#contact_form").on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "mail.php",
            data: $(this).serialize(),
            cache: false,
            success: function(result){ 
                $( "#result" ).fadeIn(1000);
            }
        });
    });
});

<强>奖金

为了让您了解GET（默认）和POST之间的区别，如果您在HTML中进行了以下更改，则不会在地址栏中看到数据。然而，由于默认操作仍然有效，您的表单仍然不会通过ajax提交。

<form id="contact_form" method="post">

jquery ajax在地址栏中返回查询字符串

4 个答案: