jQuery/Ajax表单自动提交,添加event.preventDefault仍无法阻止
问题原因分析
你添加的event.preventDefault()只能阻止浏览器默认的表单提交行为(即刷新页面式的提交),但你使用的Ajax.BeginForm依赖ASP.NET的jquery.unobtrusive-ajax.js库——这个库会给表单绑定独立的submit事件处理逻辑,它是通过JavaScript发起Ajax请求完成提交,不属于浏览器默认提交行为,因此你的preventDefault()无法拦截这个Ajax提交流程。
另外可以先排查控制台是否打印了In $('#NewRequest').submit() - newrequest.js:
- 如果没打印,说明你的submit事件绑定在
jquery.unobtrusive-ajax.js之后加载,或者存在事件覆盖的情况; - 如果打印了,那就是上述的
preventDefault()不影响Ajax请求发起的问题。
解决方法
方案1:利用AjaxOptions的OnBegin回调(推荐,符合Ajax.BeginForm设计)
修改AjaxOptions中指定的OnBegin函数,在里面添加条件判断,返回false即可终止Ajax提交:
function OnBegin() { // 替换成你的实际条件判断逻辑 var isConfirmed = confirm("确定要提交请求吗?"); // 返回false终止提交,返回true继续执行提交流程 return isConfirmed; }
方案2:阻止事件冒泡,完全接管提交逻辑
在你的submit事件处理中添加event.stopImmediatePropagation(),阻止后续绑定的submit事件(包括jquery.unobtrusive-ajax.js的逻辑)执行,之后手动控制提交:
$('#NewRequest').submit(function (event) { console.log("In $('#NewRequest').submit() - newrequest.js"); event.preventDefault(); // 阻止浏览器默认提交 event.stopImmediatePropagation(); // 拦截其他submit事件处理 // 你的条件判断逻辑 if (/* 满足提交条件 */) { // 解绑当前submit事件后再提交,避免循环触发 $(this).unbind('submit').submit(); // 也可以直接用$.ajax编写自定义提交逻辑 } });
方案3:给按钮绑定click事件,拦截默认触发
直接给提交按钮绑定click事件,阻止它触发表单提交,再手动控制提交时机:
$('#btnUpdateRequest').on('click', function(event) { event.preventDefault(); // 阻止按钮默认的submit触发 event.stopPropagation(); // 你的条件判断逻辑 if (/* 满足提交条件 */) { $('#NewRequest').submit(); } });
额外注意:确保你的newrequest.js是在jquery.js和jquery.unobtrusive-ajax.js之后加载,保证事件绑定的优先级。
内容的提问来源于stack exchange,提问作者Tom
相关产品推荐
相关产品推荐

