jQuery实现form表单元素序列化为json对象的方法

当我们处理表单数据时，通常需要将表单中的数据序列化为JSON对象，以便于后台处理。使用 jQuery 库中的 serializeArray() 函数可以简单地将表单元素序列化为JSON对象。下面是实现的方法：

1.表单序列化为JSON对象

// 使用 jQuery 库中的 serializeArray() 函数可以序列化表单数据为JSON对象
var formJson = $("#formID").serializeArray();

// 将 formJson 转化为 JSON 对象
var obj={};
for(var i =0;i<formJson.length;i++){
   obj[formJson[i].name]=formJson[i].value;
}

在上面的代码中，我们首先使用 jQuery 库的 serializeArray() 函数将表单元素序列化为一个对象数组，每个对象包含表单元素的名称和值。随后，我们遍历这个数组并将每个对象转化为键值对（key-value）的形式，最后我们就能够得到一个简单的 JSON对象。

2.示例1——将表单元素序列化为JSON对象

我们来看一个具体的例子：

HTML代码：

<form id="article-form">
  <input type="text" name="title" value="JavaScript 教程">
  <textarea name="content">JavaScript（通常缩写为“JS”）是一种高级的、解释型编程语言。。。</textarea>
  <input type="checkbox" name="published" value="true" checked>
  <input type="date" name="create_date" value="2020-12-31">
  <select name="categories">
    <option value="frontend">前端</option>
    <option value="backend">后端</option>
  </select>
  <button>发布</button>
</form>

JavaScript代码：

$(document).ready(function() {
  $('#article-form button').click(function() {
    // 序列化表单数据
    var form_data = $('#article-form').serializeArray();

    // 将 JSON 对象存储在变量中
    var form_object = {};
    $.each(form_data, function(i, input) {
      form_object[input.name] = input.value;
    });

    // 输出 JSON 对象
    console.log(JSON.stringify(form_object));
  });
});

在这个示例中，我们首先获取了表单的数据，并使用 $.each() 方法迭代表单数据对象，为每个表单元素设置一个属性和值。最后，我们可以使用 JSON.stringify() 函数将对象输出为JSON字符串。

3.示例2——基于表格数据的JSON序列化数组

我们来看一个具体的例子，让我们演示如何使用表格数据生成JSON对象数组：

HTML代码：

<table id="person-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>20</td>
      <td>不明</td>
    </tr>
  </tbody>
</table>

JavaScript代码：

function tableToJson(table) {
    var data = [];

    // 先获取表头数据
    var headers = [];
    var header_row = table.find("thead tr th");
    header_row.each(function(index, item) {
        headers.push($(item).text());
    });

    // 获取表身数据
    var rows = table.find("tbody tr");
    rows.each(function(row_index, row_item) {
        var row = {};
        var columns = $(row_item).find("td");
        columns.each(function(col_index, col_item) {
            row[headers[col_index]] = $(col_item).text();
        });
        data.push(row);
    });

   return data;
}

// 将表格数据序列化为 JSON 对象数组
var json_data = tableToJson($("#person-table"));

// 输出 JSON 数据
console.log(JSON.stringify(json_data));

在这个示例中，我们编写了一个 tableToJson() 函数，用于将表格中的数据序列化为一个JSON对象数组。该函数首先获取表格的头部列名，迭代所有的表格行，并为每个表格行插入新的JSON对象数组，然后遍历每个单元格。最后，我们可以使用JSON.stringify()函数将整个JSON对象数组序列化为一个JSON字符串。

通过这两个示例，您可以了解到如何序列化表单或表格数据为 JSON 对象。同时，您还可以通过简单的修改和定制来将这些实现应用到您的代码中。