如何在jQuery表单提交后获取指定结构的JSON对象？

你可以通过封装一个简单的转换函数，把serializeArray()返回的数组格式数据处理成你需要的JSON结构，尤其是处理复选框这类多值字段：

转换函数实现 #

function serializeFormToJson(formSelector) {
  const formData = {};
  $(formSelector).serializeArray().forEach(item => {
    if (formData[item.name]) {
      // 若字段已存在，转为数组存储多值（如复选框）
      if (!Array.isArray(formData[item.name])) {
        formData[item.name] = [formData[item.name]];
      }
      formData[item.name].push(item.value);
    } else {
      formData[item.name] = item.value;
    }
  });
  return formData;
}

修改后的表单提交代码 #

$('form').submit((e)=>{
  e.preventDefault();
  // 调用转换函数得到目标格式的对象
  let data = serializeFormToJson('form');
  console.log(data); // 此时输出的就是你需要的结构

  $.ajax({
    url: 'path/to/submit',
    type: 'POST',
    // 若服务器接收JSON格式，需转为字符串并设置contentType
    data: JSON.stringify(data),
    contentType: 'application/json',
    success: (res) => {
      console.log(res);
    }
  })
});

原表单与样式代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  Name
  <input type="text" name="name" value="Andi" /><br />
  Password
  <input type="password" name="password" value="pass" /><br />
  Role <br/>
  <input type="radio" name="role" value="teacher" checked /> Teacher <br />
  <input type="radio" name="role" value="student" /> Student <br />
  Hobby <br/>
  <input type="checkbox" name="hobby" value="Sport" checked /> Sport <br />
  <input type="checkbox" name="hobby" value="Music" /> Music <br />
  Description
  <textarea name="description">I like programming</textarea><br />
  City
  <select name="city">
    <option value="Jakarta">Jakarta</option>
    <option value="Bali">Bali</option>
  </select><br />
  <input type="submit" />
</form>

CSS

form {
  border: 1px solid black;
}

说明 #

• 转换函数会自动处理单选框、复选框、输入框等各类表单控件：单选框/普通输入框返回单个值，复选框返回选中值的数组。
• 如果后端接口接收JSON格式数据，必须设置contentType: 'application/json'，并将对象转为JSON字符串发送。

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