博客

jQuery serialize()的例子

  • Post category:jquery

当我们需要获取表单中所有的数据时，可以使用 jQuery 的 serialize() 方法来获取表单序列化后的字符串，方便后端接口使用。

什么是 jQuery serialize()？

serialize() 方法将表单内的所有元素拼接成字符串，格式为 key1=value1&key2=value2…。其中 key 是指表单元素的 name 属性值，value 是指表单元素的 value 属性值，多个元素间用 & 连接。使用例子如下：

<form id="form1">
  <input type="text" name="username" value="admin">
  <input type="password" name="password" value="123456">
  <input type="checkbox" name="rememberMe" value="true" checked>
</form>

<button id="btn1">提交</button>

<script>
  $(document).ready(function() {
    $('#btn1').click(function() {
      var formData = $('#form1').serialize();
      console.log(formData);
    });
  });
</script>

当我们点击提交按钮时，formData 的值会被输出到控制台中：

username=admin&password=123456&rememberMe=true

jQuery serialize() 的例子

序列化后使用 Ajax 发送数据

我们可以将 serialize() 方法产生的表单数据字符串作为数据发送到后台接口。以下是一个示例：

<form id="form2">
  <input type="text" name="username" value="">
  <input type="password" name="password" value="">
  <button id="btn2">提交</button>
</form>

<script>
  $(document).ready(function() {
    $('#btn2').click(function() {
      var formData = $('#form2').serialize();
      $.ajax({
        url: 'http://example.com/login',
        type: 'POST',
        data: formData,
        success: function(response) {
          console.log(response);
        }
      });
    });
  });
</script>

在这个例子中，我们只需要在表单中填写数据，点击提交按钮后，数据就通过 Ajax 发送到了后台接口，并得到了这个接口的响应。

将序列化数据还原成 JSON 对象

除了将序列化数据发送到后台接口外，我们还可以将其还原成 JSON 对象，以便进行后续处理。以下是一个示例：

<form id="form3">
  <input type="text" name="username" value="">
  <input type="password" name="password" value="">
  <button id="btn3">提交</button>
</form>

<script>
  $(document).ready(function() {
    $('#btn3').click(function() {
      var formData = $('#form3').serialize();
      var json = {};
      formData.split('&').forEach(function(item) {
        var kv = item.split('=');
        json[kv[0]] = kv[1];
      });
      console.log(json);
    });
  });
</script>

在这个例子中，我们使用了 JavaScript 的 forEach() 方法将表单数据字符串拆成了 key/value 对，并生成了一个 JSON 对象，以便后续对表单数据的处理。

Tags: