Question

我有一个简单的联系表格然后我发布了POST。我正在尝试使用jQuery AJAX数据但由于某种原因我没有得到处理程序的任何响应。这段代码是否正确？

＆＃13;

$(document).on("ready", function() {
  $("#contactButton").on("click", function(e) {
    e.preventDefault();

    var data = {
      clientName: $("input").eq(1).val(),
      clientEmail: $('input').eq(2).val(),
      clientMessage: $('textarea').val()
    };

    $.ajax({
      type: 'POST',
      url: 'email.php',
      data: data,
      dataType: 'json',
      success: function(response) {
        $("#contactButton").text("Thank You");
        $("input").val("");
        $("textarea").val("");
      },
      error: function(response) {
        alert("Error: Message Not Sent");
      }
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="contact">
  <input type="text" name="clientName" placeholder="Name" required>
  <input type="email" name="clientEmail" placeholder="Email" required>
  <textarea name="clientMessage" required>Message</textarea>
  <button id="contactButton">Contact</button>
</form>

＆＃13;

Answer 1

问题是因为您没有停止默认表单提交（只是单击按钮），因此在AJAX完成之前页面实际上正在卸载。要解决此问题，您应该挂钩submit的{{1}}事件，而不是单击按钮。然后，您可以使用form停止提交。

另请注意，您可以使用表单上的preventDefault()方法获取输入的数据，而不是构建自己的对象。试试这个：

serialize()

Answer 2

尝试更改

var data = {
    clientName: $("input").eq(1).val(),
    clientEmail: $('input').eq(2).val(),
    clientMessage: $('textarea').val()
};

到

var data = {
    'clientName': $("input").eq(1).val(),
    'clientEmail': $('input').eq(2).val(),
    'clientMessage': $('textarea').val()
};

jQuery AJAX没有错误或成功触发

2 个答案: