使用Ajax.BeginForm与jquery.unobtrusive-ajax.js时表单重复提交POST请求

嘿，我一眼就瞅到你代码里的关键问题了——你重复引入了jquery.unobtrusive-ajax.js！这正是表单提交时POST请求被发送两次的核心原因。

问题根源 #

你在页面的JS引入部分连续加了两次<script src="/assets/content/js/jquery.unobtrusive-ajax.js"></script>。这个库的工作原理是自动扫描页面上Ajax.BeginForm生成的表单，绑定对应的提交事件。当你重复加载它时，同一个表单的提交逻辑会被绑定两次，点击提交按钮自然就会触发两次POST请求。

解决方案 #

1. 移除重复的JS引入

直接删掉其中一个jquery.unobtrusive-ajax.js的引入标签，确保这个库只被加载一次。修改后的JS引入代码应该是这样的：

<script src="/assets/content/js/jquery.unobtrusive-ajax.js"></script>
<script src="/assets/global/scripts/datatable.js" type="text/javascript"></script>
<script src="/assets/global/plugins/datatables/datatables.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js" type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js" type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-toastr/toastr.min.js" type="text/javascript"></script>

2. 额外排查点（如果修改后仍有问题）

• 检查页面是否有自定义JS手动绑定了表单的submit事件，比如$('form').submit(function() { ... })，这类代码可能和unobtrusive-ajax的绑定逻辑冲突，导致重复提交。
• 确认Ajax.BeginForm生成的HTML里没有嵌套表单的情况（嵌套表单属于HTML规范不允许的结构，会引发浏览器异常行为）。
• 验证你使用的其他表单插件（比如bootstrap-fileinput）是否存在自动触发表单提交的逻辑，这类插件可能会和unobtrusive-ajax的逻辑叠加。

修改完成后刷新页面，点击UPDATE按钮，再去浏览器Network -> XHR标签页查看，应该就能看到只有一次POST请求了。

内容的提问来源于stack exchange，提问作者Fatih