jQuery序列化后的表单值转换成Json

让我来为你详细讲解如何将jQuery序列化后的表单值转换成Json。

1. 什么是jQuery序列化

在提交表单时，如果需要将表单的所有值都提交到服务器端，那么就需要对表单进行序列化。而jQuery中提供了一个方便的方法serialize()，可以将表单中的所有值序列化为字符串，如下所示：

$( "#myForm" ).serialize();

2. 如何将序列化后的表单值转换成Json

将jQuery序列化后的表单值转换成Json，可以使用serializeArray()方法进行转换，如下所示：

var formData = $("#myForm").serializeArray();
var json = {};
for (var i = 0; i < formData.length; i++) {
  json[formData[i].name] = formData[i].value;
}
console.log(json);

上述代码中，首先使用serializeArray()方法将表单序列化为一个数组，然后遍历该数组，将其中每一个元素的name属性作为对象的属性名，将value属性作为对象的属性值，最后得到一个Json对象。

3. 示例说明

• 示例1：对于一个包含用户名和密码的表单，可以将其序列化后转换为Json对象：

<form id="myForm">
  <label>Username:</label>
  <input type="text" name="username" />
  <br />
  <label>Password:</label>
  <input type="password" name="password" />
  <br />
  <button type="submit">Submit</button>
</form>

$( "#myForm" ).submit(function( event ) {
  event.preventDefault();
  var formData = $("#myForm").serializeArray();
  var json = {};
  for (var i = 0; i < formData.length; i++) {
    json[formData[i].name] = formData[i].value;
  }
  console.log(json); // 输出：{"username":"test","password":"123456"}
});

• 示例2：对于一个包含多个checkbox选项的表单，可以通过如下代码将其序列化并转换为Json对象：

<form id="myForm">
  <label>Favorite fruits:</label>
  <br />
  <input type="checkbox" name="fruits[]" value="apple" />
  <label>Apple</label>
  <br />
  <input type="checkbox" name="fruits[]" value="banana" />
  <label>Banana</label>
  <br />
  <input type="checkbox" name="fruits[]" value="pear" />
  <label>Pear</label>
  <<br />
  <button type="submit">Submit</button>
</form>

$( "#myForm" ).submit(function( event ) {
  event.preventDefault();
  var formData = $("#myForm").serializeArray();
  var json = {};
  for (var i = 0; i < formData.length; i++) {
    if (formData[i].name.indexOf("[]") !== -1) {
      var name = formData[i].name.replace("[]", "");
      if (!json[name]) {
        json[name] = [];
      }
      json[name].push(formData[i].value);
    } else {
      json[formData[i].name] = formData[i].value;
    }
  }
  console.log(json); // 输出：{"fruits":["apple","banana","pear"]}
});

以上就是将jQuery序列化后的表单值转换成Json的攻略了。