使用 jQuery ajax 提交表单不起作用答案

【问题标题】：Form submission using jQuery ajax not working使用 jQuery ajax 提交表单不起作用
【发布时间】：2015-07-29 05:11:58
【问题描述】：

我有一个使用 jQuery 动态生成的表单，如下所示：

<form id="editorform" accept-charset="utf-8" method="post" name="editorform" action="menuupdate">
    <div>
        <input id="updateItem" type="submit" value="Update"></input>
    </div>
</form>

我有 jQuery Ajax 代码：

$("#editorform").submit(function(event)
        {

    var urls=$("#editorform").attr('action');
    event.preventDefault();
    var postData=$("#editorform").serializeArray();
    $.ajax({
        type:'POST',
        url:urls,
        data:postData,
        async:   false,
        contentType :'application/x-www-form-urlencoded; charset=UTF-8',
        success: function(results){
            alert(results);
        }
        });

    return false;

        });

没有执行 ajax 调用，而是进行了正常的表单提交。

谁能帮忙弄清楚这段代码有什么问题？

非常感谢任何帮助。

【问题讨论】：

您在 JS 控制台中看到任何错误吗？

标签： jquery ajax html spring-mvc

【解决方案1】：

你说表单是动态生成的。可能是您在表单元素存在之前注册了提交事件处理程序。如果是这样的话，那么$("#editorform") 不代表当时的任何元素。

您要么必须在将表单元素添加到页面后绑定提交事件处理程序，要么使用事件委托来绑定事件。

尝试改变这个：

$("#editorform").submit(function(event)

收件人：

$(document).on('submit', '#editorform', function(event)

另外，我认为您应该致电 .serialize() 而不是 .serializeArray()。

【讨论】：