防止使用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!") 
    }); 
    }); 
} 

打印到控制檯的唯一一行是'received form'。

任何幫助將不勝感激！

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()到方法，而不僅僅是表單本身。