在 jQuery 中,你可以使用 serializeArray() 方法来将表单元素的值序列化为 JSON 对象。这个方法将表单元素的名称和值组成的对象数组,然后你可以进一步处理这个数组,将其转化为需要的 JSON 格式。

下面是一个简单的例子,演示如何使用 jQuery 将表单转化为 JSON 对象:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Form to JSON</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" value="John Doe"><br>

  <label for="age">Age:</label>
  <input type="text" id="age" name="age" value="30"><br>

  <label for="city">City:</label>
  <input type="text" id="city" name="city" value="Example City"><br>

  <input type="submit" value="Submit">
</form>

<script>
  $(document).ready(function() {
    $('#myForm').submit(function(event) {
      event.preventDefault();

      // 使用 serializeArray 方法将表单数据转化为对象数组
      var formDataArray = $(this).serializeArray();

      // 将对象数组转化为 JSON 对象
      var formDataObject = {};
      $.each(formDataArray, function(index, field) {
        formDataObject[field.name] = field.value;
      });

      // 输出转化后的 JSON 对象
      console.log(formDataObject);
    });
  });
</script>

</body>
</html>

在这个例子中,当表单提交时,阻止默认的提交行为,使用 serializeArray() 方法将表单数据转化为对象数组,然后使用 $.each() 方法将对象数组转化为 JSON 对象。最后,将转化后的 JSON 对象输出到控制台。

这是一个简单的例子,你可以根据实际需求进行更进一步的处理。


转载请注明出处:http://www.zyzy.cn/article/detail/4558/JSON