使用JavaScript中止AJAX BeginForm的表单提交

嘿，这个场景我太熟悉了！之前在.NET MVC项目里处理表单和AJAX的拦截需求时，总结了几个实用的方案，刚好能解决你的问题，分情况给你说清楚：

首先，给你的BeginForm加一个唯一ID，方便JS精准定位：

@using (Html.BeginForm("YourAction", "YourController", FormMethod.Post, new { id = "targetForm" }))
{
    // 表单内容
}

然后通过监听表单的submit事件，在条件满足时阻止默认提交行为：

$('#targetForm').on('submit', function(e) {
    // 替换成你的判断条件，比如某个状态标记为true
    if (yourStopCondition) {
        // 核心：阻止表单的默认提交动作
        e.preventDefault();
        // 可选：阻止事件冒泡，避免触发其他上层元素的submit事件
        e.stopPropagation();
        // 这里可以加提示，比如 alert('操作已中止')
        return false; // 双重保险，确保提交被拦截
    }
});

重点：e.preventDefault()是拦截表单提交的核心，它会取消浏览器默认的表单提交流程，而stopPropagation()能避免事件往上传递触发其他绑定的逻辑。

情况1：手动发起的jQuery/AJAX请求 #

如果是自己用$.ajax或$.post发起的请求，你可以保存请求的jqXHR对象，然后在条件满足时调用abort()方法中止它：

// 声明变量保存AJAX请求对象
let pendingAjaxRequest;

// 发起AJAX的函数
function triggerAjax() {
    pendingAjaxRequest = $.ajax({
        url: '@Url.Action("YourAjaxAction", "YourController")',
        type: 'POST',
        data: { /* 请求参数 */ },
        success: function(res) { /* 成功回调 */ }
    });
}

// 你的条件判断逻辑
if (yourStopCondition) {
    // 检查请求是否存在且未完成（readyState !==4 表示请求还在进行中）
    if (pendingAjaxRequest && pendingAjaxRequest.readyState !== 4) {
        pendingAjaxRequest.abort();
        // 重置变量，避免重复中止
        pendingAjaxRequest = null;
    }
}

情况2：使用MVC的Ajax.BeginForm #

如果是用Ajax.BeginForm生成的AJAX表单，不需要手动监听事件，直接利用AjaxOptions里的OnBegin回调就能拦截：

@using (Ajax.BeginForm("YourAction", "YourController", new AjaxOptions {
    OnBegin = "checkBeforeAjaxSubmit",
    HttpMethod = "POST",
    // 其他AJAX配置...
}))
{
    // 表单内容
}

然后写判断函数，返回false就会自动中止AJAX提交：

function checkBeforeAjaxSubmit() {
    if (yourStopCondition) {
        // 返回false，拦截AJAX请求
        return false;
    }
    // 返回true，允许提交
    return true;
}

如果你的场景是表单提交时同时触发了AJAX请求（比如实时校验），可以把两个逻辑合并到同一个条件判断里：

$('#targetForm').on('submit', function(e) {
    if (yourStopCondition) {
        // 阻止表单提交
        e.preventDefault();
        e.stopPropagation();
        
        // 中止正在进行的AJAX请求
        if (pendingAjaxRequest && pendingAjaxRequest.readyState !== 4) {
            pendingAjaxRequest.abort();
            pendingAjaxRequest = null;
        }
        
        alert('操作已中止');
        return false;
    }
});

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