使用AJAX发送请求前如何将Form表单数据转换为合法JSON格式

你遇到的报错根本原因是原有工具函数返回的是JavaScript原生对象，而非符合规范的JSON字符串。JS对象字面量允许键不加双引号，但JSON语法强制要求所有键必须用双引号包裹，所以直接将JS对象当做JSON提交会被Spring Boot、JSON校验工具判定为非法。

最简修复方案 #

不需要修改原有表单数据处理逻辑，仅需在拿到处理后的对象后，调用JS内置的JSON.stringify()方法完成序列化即可得到合法JSON：

用法1：使用时单独序列化（灵活度更高） #

var $form = $("#form_data");
// 先拿到JS对象
var formObj = getFormData($form);
// 序列化为合法JSON字符串
var validJson = JSON.stringify(formObj);

用法2：修改工具函数直接返回JSON #

function getFormDataAsJson($form){
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array, function(n, i){
        indexed_array[n['name']] = n['value'];
    });
    // 直接返回序列化后的JSON字符串
    return JSON.stringify(indexed_array);
}

额外注意事项 #

发送AJAX请求时需要指定请求头的Content-Type为application/json，否则Spring Boot依然无法正常解析JSON参数，jQuery AJAX示例如下：

$.ajax({
  url: "/你的后端接口路径",
  type: "POST",
  // 明确指定提交的是JSON格式数据
  contentType: "application/json;charset=utf-8",
  data: getFormDataAsJson($("#form_data")),
  success: function(result) {
    // 处理接口返回结果
  }
});

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