javascript - 通过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 调用中使用的链接(复制带有参数的位置(带有提交的参数的完整链接)-它将我重定向到完全不同的页面，然后我提交表单而不使用 ajax。

Answer 1

解决此问题的一种方法是:

1) 删除“form”声明中的“action”属性，并将按钮更改为常规按钮(不是提交)

2) 在 jQuery ajax 调用中，直接提供 url。

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

还建议在提交表单时禁用该按钮，并在 ajax 响应返回后重新启用该按钮，以防止用户再次单击该按钮。您还可以提供进一步的视觉指示，表明请求正在处理。我喜欢为此使用 blockUI jquery 插件。