使用jQuery和AJAX防止重定向

Question

我遇到了阻止代码重定向的问题。我有一个加载的表单，然后使用AJAX发送。但是，页面被重定向到/ sent_contact /，而不是使用AJAX处理。这是代码：

$(document).ready(function() {

  /* --- Load Contact Form --- */

  $("#contact").load("contact_form/", function() {
    console.log("received form");
  });

  /* --- Send Contact Form --- */

  $("#contact-form").on("submit", function(event){
    console.log("submitting");
    event.preventDefault();
    sendForm($("#contact-form"));
    return false;
  });

});

function sendForm(form) {
  $.post("contact_form/", form, function() {
    // Load Confirmation
    $("#contact").load("sent_contact/", function() {
      console.log("sent successfully!")
    });
  });
}

打印到控制台的唯一一行是“收到表格”。

非常感谢任何帮助！

Answer 1

您需要在加载之后将submit事件附加到表单，以便需要将事件挂钩放在回调中：

$(document).ready(function() {
    $("#contact").load("contact_form/", function() {
        console.log("received form");

        $("#contact-form").on("submit", function(event){
            console.log("submitting");
            event.preventDefault();
            sendForm($("#contact-form"));
        });
    });
});

function sendForm(form) {
    $.post("contact_form/", form.serialize(), function() {
        // Load Confirmation
        $("#contact").load("sent_contact/", function() {
            console.log("sent successfully!")
        });
    });
}

另请注意，您需要将form.serialize()传递给$.post方法，而不仅仅是表单本身。