为何jQuery Bootstrap表单无法向REST服务提交正确JSON数据？

嘿，我来帮你排查下这个POST数据异常的问题，其实是几个小细节没处理到位，咱们一步步来修复：

1. 表单元素缺失name属性 #

jQuery的serialize()方法是依赖表单元素的name属性来生成键值对的，你的input只有id没有name，所以serialize()返回的是空字符串。后续你用JSON.stringify()处理这个空字符串，得到的是""，jQuery发送请求时会把这个字符串当作键名，最终就出现了%22%22=（也就是""=的URL编码结果）。

修复：给每个input添加name属性

<form id="createForm">
  <p><input id="firstName" name="firstName" type="text"/>
  <p><input id="lastName" name="lastName" type="text"/>
  <p><input id="emailAddr" name="emailAddr" type="text"/>
  <button id="doCreateButton" class="btn btn-primary" type="submit">Submit</button>
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</form>

2. 错误地对serialize()结果做JSON序列化 #

serialize()返回的是application/x-www-form-urlencoded格式的字符串（比如firstName=John&lastName=Doe），你直接把这个字符串转成JSON的话，得到的是一个包含该字符串的JSON值，而不是你需要的用户对象JSON。正确的做法是先把表单数据转换成JavaScript对象，再转成JSON字符串。

修复：自定义方法将表单转为对象，或者用serializeArray()处理
先写一个工具函数把表单转为对象：

function formToObject(formSelector) {
  const formData = $(formSelector).serializeArray();
  const obj = {};
  formData.forEach(item => {
    obj[item.name] = item.value || '';
  });
  return obj;
}

然后在AJAX请求里使用：

data: JSON.stringify(formToObject('#createForm')),

3. 未阻止表单默认提交行为 #

你的提交按钮是type="submit"，点击时会触发表单的默认提交动作，这会和你的AJAX请求冲突，可能导致请求还没完成页面就刷新了。

修复：在点击事件中添加e.preventDefault()

$("#doCreateButton").click(function(e) {
  e.preventDefault(); // 阻止表单默认提交行为
  // 后续AJAX代码...
});

4. AJAX请求未设置正确的Content-Type #

当你发送JSON格式的数据时，必须告诉服务器请求体的类型是JSON，否则Spring的@RequestBody无法正确解析数据。

修复：在AJAX配置中添加contentType参数

$.ajax({
  type: "POST",
  url: "http://localhost:8080/myapp/json/user/create",
  data: JSON.stringify(formToObject('#createForm')),
  contentType: "application/json", // 关键：指定内容类型为JSON
  success: function(msg) {
    $("#myModal").modal('hide'); // 这里你之前漏了#，要修正
  },
  error: function() {
    alert("failure");
  },
  done: function(e) {
    console.log("DONE");
    $("#myModal").modal('hide'); // 同样修正#选择器
  }
});

额外优化：后端直接接收Java对象 #

既然用了Spring，没必要手动解析JSON字符串，定义一个User实体类：

public class User {
    private String firstName;
    private String lastName;
    private String emailAddr;
    
    // 生成getter、setter方法
}

然后修改控制器方法，直接接收User对象：

@RequestMapping(value = "/json/user/create", method = RequestMethod.POST)
public ResponseEntity<String> createUser(@RequestBody User user) throws Exception {
    // 直接使用user.getFirstName()、user.getLastName()等属性
    /* ... 业务逻辑 ... */
    return new ResponseEntity<String>(replyObj.toJSONString(), HttpStatus.OK);
}

这样更简洁，也避免了手动解析JSON的潜在问题。

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