jQuery AJAX没有触发错误或成功事件

Question

我有一个简单的联系表单，我正在使用POST方法提交。我试图使用jQuery AJAX数据，但是出于某种原因，我没有从处理程序中获得任何响应。这段代码正确吗？

$(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");
      }
    });
  });
});

<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>

- Michael Paccione

Answer 1

问题在于你没有停止默认的表单提交（仅仅是按钮点击），所以在AJAX完成之前页面实际上已经卸载了。为了解决这个问题，你应该连接到表单的 submit 事件而不是按钮的点击。然后，你可以使用 preventDefault() 来停止提交。

此外，请注意你可以使用表单上的 serialize() 方法来获取输入的数据，而不是构建自己的对象。尝试这个:

$(document).on("ready", function() {
    $("#contact").on("submit", function(e) {
        e.preventDefault();

        $.ajax({
            type: 'POST',
            url: 'email.php',
            data: $(this).serialize(),
            dataType: 'json',
            success: function(response){
                $("#contactButton").text("Thank You");
                $("input").val("");
                $("textarea").val("");
            }, 
            error: function(response){
                alert("Error: Message Not Sent");
            }
        });
    });
});

- Rory McCrossan

---

谢谢，Rory。我一直在手动序列化，因为我在寻找问题，没有意识到它是按钮与表单链接的preventDefault问题。感谢您的帮助！ - Michael Paccione

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()
};

- r3fresh_

---

在这种情况下，引号和非引号键都是有效的，不会产生任何区别，因为键名中没有特殊字符。 - Rory McCrossan

好的，抱歉。我之前认为是因为这个出现了错误，我的错。 - r3fresh_