如何通过AJAX向Spring MVC同时传递完整Model与字符串参数

我懂你遇到的困扰了——单独传序列化的表单数据或者单独传额外字符串参数时后端能正常接收，但一起传就失效。这是因为你当前的AJAX参数传递方式有误，导致Spring没法正确把序列化的表单数据解析到你的ConsultantBidModel里。

问题根源 #

你写的data: {str, tempCnltName}是ES6的对象简写语法，实际等价于{str: str, tempCnltName: tempCnltName}。这时候后端会把str当成一个普通参数，值是你序列化后的整个字符串（比如leadingCnltName=xxx&...），而不是把这个字符串里的键值对拆解成ConsultantBidModel的各个属性，自然就无法正确绑定到@ModelAttribute标注的参数上。

解决方案一：解析序列化字符串为对象并合并参数 #

把序列化的表单字符串解析成键值对对象，再和额外参数合并，这样Spring就能正常解析Model属性了：

var str = $("#resourceManagement").serialize();
var agreementId = ${agreementId};
var tempCnltName = $modal.find("input[data-type='cnltName']").val();

// 将序列化的urlencoded字符串转为键值对对象
var formData = {};
str.split('&').forEach(function(item) {
    var parts = item.split('=');
    var key = decodeURIComponent(parts[0]);
    var value = decodeURIComponent(parts[1] || '');
    formData[key] = value;
});

// 合并额外参数
$.extend(formData, {tempCnltName: tempCnltName});

$.ajax({
    type: "POST",
    data: formData,
    url: "${AGREEMENT_BASE_URL}/checkDuplicateConsultantOnline",
    async: false,
    dataType: "json",
    success: function (data, status, xhr) {
        message = data.errorMsg;
    },
    error: function () {
    }
});

解决方案二：使用FormData（更推荐，扩展性更好） #

如果你的表单未来可能包含文件上传等复杂内容，或者想更简洁地处理，直接用FormData来封装表单数据和额外参数：

var formData = new FormData($("#resourceManagement")[0]);
var tempCnltName = $modal.find("input[data-type='cnltName']").val();

// 添加额外的字符串参数
formData.append('tempCnltName', tempCnltName);

$.ajax({
    type: "POST",
    data: formData,
    url: "${AGREEMENT_BASE_URL}/checkDuplicateConsultantOnline",
    async: false,
    dataType: "json",
    // 必须设置这两个属性，让jQuery不自动处理数据和 contentType
    contentType: false,
    processData: false,
    success: function (data, status, xhr) {
        message = data.errorMsg;
    },
    error: function () {
    }
});

控制器代码无需修改 #

你的Spring控制器代码是没问题的：@ModelAttribute("consultantBidModel") ConsultantBidModel model会自动绑定表单里的对应字段，@RequestParam(value = "tempCnltName", required = false) String cnltName也能正确拿到额外传递的参数，只要前端参数名和这里的value属性对应上就行。

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