防止在 Ajax 发布后使用 Javascript 重新提交表单（无重定向）

Posted 2023-05-09

【中文标题】防止在 Ajax 发布后使用 Javascript 重新提交表单（无重定向）

【英文标题】：Prevent Form Resubmission With Javascript After Ajax Post (No Redirect)

【发布时间】：2020-01-08 16:23:50

【问题描述】：

之前有人就发布表单不重定向提出了类似的问题，但在我的情况下，没有一个解决方案实际上有效，而且这些答案已经有 8 年的历史了。在我的情况下，我有一个简单的表单，它使用 Ajax 将一些文本字段提交到 URL：

<form id="f">
    <input type="text" name="name">
    <button type="submit" form="f">Submit</button>
</form>

<script>
$("#f").submit(function() 
    var arr = $("#f").serializeArray();
    var name = arr[0].value;
    var ajaxConfig = type: "post", url: "submit_form", data: name: name;
    $.ajax(ajaxConfig);
    return false;
);
</script>

就向服务器提交数据而言，这非常有效。发送和接收 POST 请求，但是每当再次访问该页面时，浏览器将尝试无缘无故地重新提交数据（为什么？）。这会导致向我的网站主页发送无效请求和 HTTP 405“页面不工作错误”。该页面将在后续请求时再次工作。这在 Chrome 和 Safari 中都会发生。

我试过history.replaceState(null, null, location.href);，其他人说它对他们有用，但对我来说它不起作用，无论是在 Chrome 还是 Safari 中。

发布/重定向/获取不是一个可行的解决方案，因为我想留在同一页面上。请不要推荐我使用 Post/Redirect/Get 解决方案，因为它不适合我的用例。

一种解决方案是不使用默认的“提交”功能，而只需通过自定义 javascript 函数和点击处理程序提交表单：

<form id="f">
    <input type="text" name="name">
    <button form="f" onmousedown='submit()'>Submit</button>
</form>

<script>
    function submit() 
        var arr = $("#f").serializeArray();
        var name = arr[0].value;
        var ajaxConfig = type: "post", url: "submit_form", data: name: name;
        $.ajax(ajaxConfig);

    );
</script>

但这个答案似乎很老套。有没有办法使用规范的表单提交按钮提交，而无需在下一页访问时重新提交？此外，为什么表单会在重新访问页面时无缘无故地重新提交，即使在确认它们之前已经提交过一次之后？

编辑： 使用 preventDefault() 不会做任何事情：

<script>
$("#f").submit(function(e) 
    e.preventDefault();
    var arr = $("#f").serializeArray();
    var name = arr[0].value;
    var ajaxConfig = type: "post", url: "submit_form", data: name: name;
    $.ajax(ajaxConfig);
    return false;
);
</script>

【问题讨论】：

当您使用经典表单提交时，它将保留在浏览器历史记录中。因此，当您返回时，它会将其记住为表单提交。这就是使用onclick 并执行一个函数来进行AJAX 调用的原因。默认情况下，此方法将防止该问题。修改历史记录是解决此问题的唯一其他方法（我可以想到 atm）。使用点击事件并不难。这是相当标准的事情。

在提交函数submit(event) 中传递事件，然后阻止默认操作。 function submit(event) event.preventDefault() /** rest of the code here **/ 不确定这是否能解决您的问题。您还可以在按钮上使用click 事件。这不被认为是 hacky。

@Sudheer Prevent default 没有改变任何东西 - 但是如果我不使用经典表单提交对我来说不是很奇怪，那么我也可以不使用经典表单提交。谢谢！

【参考方案1】：

您需要在表单提交事件中运行preventDefault()。 它阻止了表单的默认操作 - 因为表单应该在每次提交时重新加载您的页面。

阅读更多official documentation

<script>
$("#f").submit(function(e) 
    e.preventDefault();
    var arr = $("#f").serializeArray();
    var name = arr[0].value;
    var ajaxConfig = type: "post", url: "submit_form", data: name: name;
    $.ajax(ajaxConfig);
    return false;
);
</script>

【讨论】：

试过了，至少在 chrome 或 safari 中不起作用。