ASP.NET多表单视图下如何用JavaScript获取输入值提交AJAX请求

架构老林

2026-9-24

问题原因

箭头函数(e) => {}的this指向全局上下文，而非当前点击的提交按钮元素，导致$(this).closest()无法匹配到对应表单
事件绑定逻辑冲突：在按钮点击事件中重复绑定表单的submit事件，会造成单次提交触发多次逻辑的问题
jQuery对象与原生DOM方法混用：$form是jQuery封装的对象，无法直接调用原生DOM的addEventListener方法

修复方案

直接监听所有表单的submit事件即可，无需单独绑定按钮点击事件，同时优先通过表单内元素的name属性查找值，不依赖ID拼接规则，稳定性更高：

$(document).on("submit", ".form", function(e) {
    // 阻止默认表单提交跳转
    e.preventDefault();
    const $currentForm = $(this);
    // 获取当前表单ID
    const formId = $currentForm.attr("id");
    // 获取对应输入框值，两种方式可选：
    // 方式1：按原有ID拼接规则获取
    const documentTypeId = $(`#${formId}_documentTypeId`).val();
    // 方式2：直接在当前表单内按name属性查找，无需依赖ID规则，更稳妥
    const accreditationApplicationId = $currentForm.find('input[name="accreditationApplicationId"]').val();
    
    // 提交带文件的表单，直接使用FormData自动收集所有表单数据
    const formData = new FormData(this);
    // 发起AJAX请求
    $.ajax({
        url: $currentForm.attr("action"),
        method: $currentForm.attr("method"),
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            // 上传成功后自定义逻辑，比如刷新文件列表、提示成功
            alert("文件上传成功");
        },
        error: function() {
            alert("文件上传失败，请重试");
        }
    });
});