通過Ajax提交的表單不起作用

Question

我這種形式：

<form method="post" id="userForm" name="userForm" class="form-validate" action="/istuff/index.php/user" >
<input type="hidden" name="option" value="com_virtuemart"/>
<input type="hidden" name="view" value="user"/>
<input type="hidden" name="controller" value="user"/>
<input type="hidden" name="task" value="saveUser"/>
<input type="hidden" name="layout" value="edit_address"/>
<input type="hidden" name="address_type" value="ST"/>
<button class="button" type="submit"
</form>

我有這種形式的ajax腳本：

jQuery(document).ready(function($) {
    $("#userForm").live("submit", function (event) {
    event.preventDefault();
    var form = $(this);
    $.ajax({
        url: form.attr("action"), // Get the action URL to send AJAX to
        type: "POST",
        data: form.serialize(), // get all form variables
        success: function(result){
            // ... do your AJAX post result
        }
    });
    }); 
}); 

不用AJAX，表單就可以很好地工作，但是我添加了這個腳本，它不起作用。 此外，我嘗試轉到AJAX調用中使用的鏈接（帶有參數的復制位置（帶有提交的參數的完整鏈接）-它會將我重定向到與之完全不同的頁面，然后提交wihout ajax表單。

Answer 1

解決此問題的一種方法是：

1）在“表單”聲明中刪除“操作”屬性，然后將按鈕更改為常規按鈕（而非提交）

2）在jQuery ajax調用中，直接提供url。

$.ajax({
        url: "/istuff/index.php/user", 

還建議您在提交表單后禁用按鈕，並在ajax響應返回時將其啟用，以防止用戶再次單擊按鈕。 您還可以進一步直觀地指示正在處理該請求。 我喜歡為此使用blockUI jquery插件。

Answer 2

我希望這可以解決問題：

jQuery(document).ready(function() {
    $("#userForm").submit(function () {
    var form = $("$userForm");
    $.ajax({
        url: form.attr("action"), // Get the action URL to send AJAX to
        type: "POST",
        data: form,
        success: function(result){
            // ... do your AJAX post result
        }
    });
    return false;
    }); 
}); 

Answer 3

從jQuery 1.7開始，不推薦使用.live（）方法。 使用.on（）附加事件處理程序。

我通過更改以下行嘗試了您的代碼，該代碼行之有效，

$("#userForm").on("submit", function (event) {