Ajax 表单提交问题答案

【问题标题】：Ajax form submission issuesAjax 表单提交问题
【发布时间】：2021-05-13 00:35:42
【问题描述】：

我有一个简单的表单，我试图通过 ajax 提交。我在 Jquery 中加载并得到了这个简单的表单：

<form id="post_edit">
<input type="hidden" id="id" name="id" value="1">
<input type="text" id="title" name"title" value="This is the title">
<textarea id="body" name="body" rows="3">This is the body</textarea>
<button type="submit" onclick="this.form.submit();" data-dismiss="modal">Save</button>

然后我有这段代码通过 ajax 提交表单：

$("#post_edit").submit(function(e) {

            e.preventDefault(); 

            var form = $(this);
            var url = 'http://localhost/ajax/posts/' + form.attr('id');

            $.ajax({
                type: "PATCH",
                url: url,
                data: form.serialize(), // serializes the form's elements.
                success: function(data)
                {
                    toastr.success('The post was successfully updated!')
                },
                error:function() {
                    toastr.error('Unable to save changes to the post.<br />Please try again later.')
                }
            });

        });

不知道为什么，但是 ajax 提交不起作用，而只是 POST 到当前 URL。

【问题讨论】：

标签： jquery ajax forms

【解决方案1】：

在submit 按钮的onclick 属性中，您将触发form 元素上的表单提交。这不会被 jQuery 捕获，并导致您在表单提交时看到的行为。因为它没有指定action，所以它发送一个POST请求，默认情况下同样没有method属性，到当前URL。

要解决此问题，您只需从 HTML 中删除 onclick 属性并完全依赖您使用 jQuery 附加的不显眼的事件处理程序：

<button type="submit" data-dismiss="modal">Save</button>

【讨论】：

奇怪，因为我必须添加 onclick 才能让表单执行任何操作。我最初没有它，但没有提交。当我点击提交时，开发人员工具中的网络选项卡显示根本没有发出任何请求，它只是关闭了模式并且没有做任何进一步的事情。
在这种情况下，您可能需要将 jQuery 代码包装在 document.ready 事件处理程序中，以确保它在 DOM 加载后执行。
所以那也没用。我必须这样做并更改我的函数以使用它的 id 来定位提交按钮的 onclick 事件。现在它的工作。
很高兴你把它整理好了。