無法獲得.js以表單POST的形式調用

Question

我有一些「正在工作」的代碼，但沒有按照我希望的方式執行。

在我的網頁，我在報頭中的一些代碼：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="update.js"></script> 

，並在我的主頁，我有：

<form id="updateChanges" method="POST" action="update.php"> 
...code... 
</form> 

當我點擊這個表格內的按鈕，我想讓update.js內部的代碼執行，但是頁面重定向到update.php，併成功執行我的代碼。我試圖繞過這個重定向，並執行代碼而不進行頁面刷新。我不明白爲什麼它不起作用。

我從教程中瞭解瞭如何使用AJAX的.js。

$(function() { 

    // Get the form. 
    var form = $('#updateChanges'); 

    // Set up an event listener for the contact form. 
    $(form).submit(function(event) { 

    // Stop the browser from submitting the form. 
    event.preventDefault(); 

    // Serialize the form data. 
    var formData = $(form).serialize(); 

    // Submit the form using AJAX. 
    $.ajax({ 
     type: 'POST', 
     url: $(form).attr('action'), 
     data: formData 
    }) 
}); 
}); 

我的JavaScript文件沒有被調用。爲什麼？

Answer 1

您已經在form變量中定義了jQuery表單對象，您無需再爲jQuery包裝它。

的$(form)所有實例成爲：form

$(function() { 

    // Get the form. 
    var form = $('#updateChanges'); 

    // Set up an event listener for the contact form. 
    form.submit(function(event) { 

     // Stop the browser from submitting the form. 
     event.preventDefault(); 

     // Serialize the form data. 
     var formData = form.serialize(); 

     // Submit the form using AJAX. 
     $.ajax({ 
      type: 'POST', 
      url: form.attr('action'), 
      data: formData 
     }); 
    }); 
});