AJAX传递多FormCollection参数异常：仅第二个表单数据生效

你当前的写法会导致后端无法正确解析两个表单的序列化数据。serialize()返回的是application/x-www-form-urlencoded格式的字符串（比如key1=value1&key2=value2），当把这类字符串作为对象属性值传给jQuery的data参数时，jQuery会对整个字符串再次URL编码，后端接收到的form1和form2是两个完整的编码字符串，而非解析后的键值对集合，最终出现参数覆盖或解析错误。

方案1：合并表单序列化字符串（后端单参数接收） #

前端将两个表单的序列化结果拼接成一个字符串，后端用单个FormCollection接收（注意：若两表单有同名字段，后一个会覆盖前一个，需保证字段名唯一）：

var formData = $('#form1').serialize() + '&' + $('#form2').serialize();

$.ajax({
    url: "/Controller/PassForm",
    type: 'POST',
    data: formData,
    dataType: 'json',
    success: function (data) {
        // 处理返回结果
    }
});

后端代码：

public JsonResult PassForm(FormCollection form){
    // 这里可获取两个表单的所有键值对
}

方案2：用FormData传递（推荐，支持文件上传） #

前端构建FormData对象，为两个表单的字段添加前缀区分，后端用模型类或带前缀的FormCollection接收：

var formData = new FormData();
// 添加form1的所有字段，前缀form1.
$('#form1 input, #form1 select, #form1 textarea').each(function() {
    if (this.name) { // 跳过无name属性的元素
        formData.append('form1.' + this.name, $(this).val());
    }
});
// 添加form2的所有字段，前缀form2.
$('#form2 input, #form2 select, #form2 textarea').each(function() {
    if (this.name) {
        formData.append('form2.' + this.name, $(this).val());
    }
});

$.ajax({
    url: "/Controller/PassForm",
    type: 'POST',
    data: formData,
    processData: false, // 禁止jQuery处理FormData
    contentType: false, // 让浏览器自动设置Content-Type
    dataType: 'json',
    success: function (data) {
        // 处理返回结果
    }
});

后端用模型类接收（推荐，自动绑定更清晰）：

// 对应form1的模型
public class Form1Model {
    public string Username { get; set; }
    // 其他字段对应form1中元素的name属性
}

// 对应form2的模型
public class Form2Model {
    public string Address { get; set; }
    // 其他字段对应form2中元素的name属性
}

public JsonResult PassForm(Form1Model form1, Form2Model form2){
    // 直接使用绑定后的模型数据
}

如果用FormCollection接收，需通过前缀获取字段：

public JsonResult PassForm(FormCollection form){
    var form1Username = form["form1.Username"];
    var form2Address = form["form2.Address"];
}

方案3：解析序列化字符串为对象后传递 #

先把表单序列化结果转为JS对象，再合并传递，后端用模型类自动绑定：

// 工具函数：将表单序列化转为对象
function serializeToObj(formSelector) {
    var result = {};
    $(formSelector).serializeArray().forEach(item => {
        result[item.name] = item.value;
    });
    return result;
}

var form1Obj = serializeToObj('#form1');
var form2Obj = serializeToObj('#form2');

$.ajax({
    url: "/Controller/PassForm",
    type: 'POST',
    data: { form1: form1Obj, form2: form2Obj },
    dataType: 'json',
    success: function (data) {
        // 处理返回结果
    }
});

后端代码同方案2的模型类接收方式即可。

方案4：后端手动解析序列化字符串（不修改前端） #

如果不想调整前端代码，后端可以先接收两个序列化字符串，再手动解析为键值对集合：

// 定义接收类
public class FormRequest {
    public string form1 { get; set; }
    public string form2 { get; set; }
}

public JsonResult PassForm(FormRequest request){
    // 解析form1的序列化字符串
    var form1Collection = HttpUtility.ParseQueryString(request.form1);
    // 解析form2的序列化字符串
    var form2Collection = HttpUtility.ParseQueryString(request.form2);
    // 后续业务处理
}

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