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）删除＆＃39;动作＆＃39;您的“＆＃39;形式的属性＆＃39;声明并将按钮更改为常规按钮（不是提交）

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) {

通过ajax提交的表单不起作用

3 个答案: