JQuery中serialize()、serializeArray()和param()方法示例介绍

JQuery中serialize()、serializeArray()和param()方法是用于序列化表单数据的三种方法。它们可以将表单中的数据转为序列化字符串，用于表单的提交或AJAX操作。下面将详细讲解这三种方法的使用方法和示例。

serialize()方法详解

serialize()方法将表单元素序列化为URL编码文本字符串。它将所有表单元素的名称和值作为键值对进行序列化，并以“&”字符分隔成字符串。它的语法如下：

$(selector).serialize();

其中，selector表示需要序列化的表单，可以是ID选择器（#form-id），也可以是元素选择器（form）。

下面是一个使用serialize()方法的示例：

<form id="myForm">
  <input type="text" name="username" value="张三">
  <input type="password" name="password" value="123456">
  <input type="checkbox" name="hobbies[]" value="篮球" checked>篮球
  <input type="checkbox" name="hobbies[]" value="足球" checked>足球
  <input type="radio" name="gender" value="男" checked>男
  <input type="radio" name="gender" value="女">女
  <select name="city">
    <option value="北京" selected>北京</option>
    <option value="上海">上海</option>
    <option value="广州">广州</option>
  </select>
  <textarea name="introduction">这是一段介绍</textarea>
</form>
<button onclick="myFunction()">提交</button>

<script>
function myFunction() {
  var formData = $('#myForm').serialize();
  console.log(formData);
}
</script>

上面的示例中定义了一个表单，包含了各种类型的表单元素。当点击按钮时，将表单序列化为字符串并打印到控制台。执行结果如下：

username=%E5%BC%A0%E4%B8%89&password=123456&hobbies%5B%5D=%E7%AF%AE%E7%90%83&hobbies%5B%5D=%E8%B6%B3%E7%90%83&gender=%E7%94%B7&city=%E5%8C%97%E4%BA%AC&introduction=%E8%BF%99%E6%98%AF%E4%B8%80%E6%AE%B5%E4%BB%8B%E7%BB%8D

可以看到，表单元素被序列化为一段URL编码的字符串，并以“&”字符分隔开来。

serializeArray()方法详解

serializeArray()方法将表单元素序列化为一个对象数组，每个对象包含一个名称和一个值。它的使用方法和语法与serialize()方法类似。下面是一个使用serializeArray()方法的示例：

<form id="myForm">
  <input type="text" name="username" value="张三">
  <input type="password" name="password" value="123456">
  <input type="checkbox" name="hobbies[]" value="篮球" checked>篮球
  <input type="checkbox" name="hobbies[]" value="足球" checked>足球
  <input type="radio" name="gender" value="男" checked>男
  <input type="radio" name="gender" value="女">女
  <select name="city">
    <option value="北京" selected>北京</option>
    <option value="上海">上海</option>
    <option value="广州">广州</option>
  </select>
  <textarea name="introduction">这是一段介绍</textarea>
</form>
<button onclick="myFunction()">提交</button>

<script>
function myFunction() {
  var formData = $('#myForm').serializeArray();
  console.log(formData);
}
</script>

执行结果如下：

[
  {"name":"username","value":"张三"},
  {"name":"password","value":"123456"},
  {"name":"hobbies[]","value":"篮球"},
  {"name":"hobbies[]","value":"足球"},
  {"name":"gender","value":"男"},
  {"name":"city","value":"北京"},
  {"name":"introduction","value":"这是一段介绍"}
]

可以看到，表单元素被序列化为一个对象数组，并且每个对象包含一个名称和一个值。

param()方法详解

param()方法用于将一个对象转换为一个URL编码的字符串。它的语法如下：

$.param(obj)

其中，obj表示需要转换的对象。

下面是一个使用param()方法的示例：

<form id="myForm">
  <input type="text" name="username" value="张三">
  <input type="password" name="password" value="123456">
  <input type="checkbox" name="hobbies[]" value="篮球" checked>篮球
  <input type="checkbox" name="hobbies[]" value="足球" checked>足球
  <input type="radio" name="gender" value="男" checked>男
  <input type="radio" name="gender" value="女">女
  <select name="city">
    <option value="北京" selected>北京</option>
    <option value="上海">上海</option>
    <option value="广州">广州</option>
  </select>
  <textarea name="introduction">这是一段介绍</textarea>
</form>
<button onclick="myFunction()">提交</button>

<script>
function myFunction() {
  var formData = $('#myForm').serializeArray();
  var dataStr = $.param(formData);
  console.log(dataStr);
}
</script>

执行结果与serialize()方法的结果相同：

username=%E5%BC%A0%E4%B8%89&password=123456&hobbies%5B%5D=%E7%AF%AE%E7%90%83&hobbies%5B%5D=%E8%B6%B3%E7%90%83&gender=%E7%94%B7&city=%E5%8C%97%E4%BA%AC&introduction=%E8%BF%99%E6%98%AF%E4%B8%80%E6%AE%B5%E4%BB%8B%E7%BB%8D

示例说明

示例1

有一个表单，包含了若干输入框和一个提交按钮。用户可以填写表单数据并提交到服务器，服务器接收到数据后进行处理并返回结果。下面是一个基于AJAX实现表单提交的代码示例：

<form id="myForm">
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <button onclick="submitForm()">提交</button>
</form>

<script>
function submitForm() {
  var formData = $('#myForm').serialize();
  $.ajax({
    url: 'http://example.com/submit-data',
    method: 'POST',
    data: formData,
    success: function(response) {
      console.log('提交成功，服务器返回结果：' + response);
    },
    error: function(xhr, status, error) {
      console.log('提交失败，错误信息：' + error);
    }
  });
}
</script>

该示例使用serialize()方法将表单数据序列化为字符串，并将其作为AJAX请求的数据发送到服务器。服务器接收到数据后进行处理，并返回处理结果。在成功回调函数中，输出服务器返回的结果。

示例2

有一个表单，包含了若干输入框和一个重置按钮。用户可以填写表单数据并点击重置按钮清空表单数据。下面是一个使用serializeArray()方法实现表单重置的代码示例：

<form id="myForm">
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <button type="reset" onclick="resetForm()">重置</button>
</form>

<script>
function resetForm() {
  var formData = $('#myForm').serializeArray();
  $.each(formData, function(i, field) {
    $('input[name="' + field.name + '"]').val('');
  });
}
</script>

该示例使用serializeArray()方法将表单数据序列化为对象数组，并使用$.each()方法遍历数组，将输入框的值设置为空。在重置按钮的click事件中调用resetForm()函数即可清空表单。