jquery序列化表单 json

使用jQuery的serializeArray()方法可以将表单序列化为JSON格式。

示例代码如下：

var form = $('#myForm');
var formData = form.serializeArray();
var jsonData = {};

$.each(formData, function() {
    if (jsonData[this.name]) {
        if (!jsonData[this.name].push) {
            jsonData[this.name] = [jsonData[this.name]];
        }
        jsonData[this.name].push(this.value || '');
    } else {
        jsonData[this.name] = this.value || '';
    }
});

console.log(jsonData);

首先使用jQuery选择器获取表单元素，然后使用serializeArray()方法将表单序列化为一个数组。接着定义一个空的JSON对象，使用$.each()方法遍历表单数据，将每个表单字段的name属性作为JSON对象的键，将每个表单字段的值作为相应键的值，最终得到一个完整的JSON对象。

相关问题

JQuery序列化表单值serializeToJson()、serialize()方法

JQuery 提供了两种序列化表单值的方法：serializeToJson() 和 serialize()。

serializeToJson() 方法可以将表单中的所有字段值序列化为一个 JSON 对象，该方法需要依赖 jQuery 库和 json2 库。

示例代码：

$.fn.serializeToJson = function () {
  var serializeObj = {};
  $(this.serializeArray()).each(function () {
    serializeObj[this.name] = this.value;
  });
  return serializeObj;
};

使用方式：

var formJson = $("#form").serializeToJson();
console.log(formJson);

serialize() 方法可以将表单中的所有字段值序列化为一个 URL 编码的字符串，该方法只需要依赖 jQuery 库。

示例代码：

var formStr = $("#form").serialize();
console.log(formStr);

使用方式：

<form id="form" method="post">
  <input type="text" name="name" value="" />
  <input type="text" name="age" value="" />
  <button type="button" onclick="submitForm()">提交</button>
</form>
<script>
  function submitForm() {
    var formData = $("#form").serialize();
    console.log(formData);
    // ...
  }
</script>

前端序列化表单为json

在前端，我们可以使用 JavaScript 将表单数据序列化为 JSON 格式。常用的方法是使用 jQuery 库提供的 `serializeArray()` 或 `serialize()` 方法。

示例代码：

<form id="myForm">
  <input type="text" name="name" value="John">
  <input type="text" name="age" value="30">
  <input type="text" name="email" value="john@example.com">
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  // 使用 serializeArray() 方法将表单数据序列化为 JSON 对象数组
  var formData = $('#myForm').serializeArray();
  console.log(formData);

  // 使用 serialize() 方法将表单数据序列化为 JSON 字符串
  var formDataString = $('#myForm').serialize();
  console.log(formDataString);
</script>

在上面的示例中，我们首先定义了一个包含三个输入框的表单，然后使用 jQuery 库的 `serializeArray()` 和 `serialize()` 方法将表单数据序列化为 JSON 对象数组和 JSON 字符串，并将结果输出到控制台中。