jQuery | 序列化() 与示例

在 jQuery 中，serialize() 方法用于将表单数据序列化，将表单数据转换为字符串格式，以便于通过 AJAX 请求进行传输。本文将介绍 jQuery 中 serialize() 方法的用法和示例。

语法

serialize() 方法的语法如下：

$(selector).serialize();

其中，selector 是一个选择器，可以是表单标签或者表单元素标签。

用法

通过 serialize() 方法可以将表单中的所有输入元素序列化，并返回序列化后的字符串。序列化后的字符串一般用于通过 AJAX 请求向服务器提交表单数据。

以下是使用 serialize() 方法的基本示例：

<form>
  <input type="text" name="name" value="John">
  <input type="text" name="age" value="30">
  <input type="radio" name="gender" value="Male" checked> Male
  <input type="radio" name="gender" value="Female"> Female
</form>

<script>
$(document).ready(function(){
  $("form").submit(function(event){
    event.preventDefault(); //防止表单提交
    var formdata = $(this).serialize(); //序列化表单数据
    console.log(formdata); //打印序列化后的字符串
  });
});
</script>

运行以上代码，当表单提交时，控制台会输出以下内容：

name=John&age=30&gender=Male

序列化复选框

serialize() 方法也可以用于序列化表单中的复选框数据。在 HTML 中，复选框元素需要指定相同的 name 属性，但是 value 属性可以不同。使用 serialize() 方法序列化后，每个被选中的复选框元素将会被包含在序列化后的字符串中。

以下是序列化复选框数据的示例：

<form>
  <input type="text" name="name" value="John">
  <input type="text" name="age" value="30">
  <input type="checkbox" name="hobby" value="Reading"> Reading
  <input type="checkbox" name="hobby" value="Music" checked> Music
</form>

<script>
$(document).ready(function(){
  $("form").submit(function(event){
    event.preventDefault(); //防止表单提交
    var formdata = $(this).serialize(); //序列化表单数据
    console.log(formdata); //打印序列化后的字符串
  });
});
</script>

运行以上代码，当表单提交时，控制台会输出以下内容：

name=John&age=30&hobby=Music

总结

serialize() 方法是 jQuery 中用于序列化表单数据的方法，可以将表单数据转换为字符串格式，以便于通过 AJAX 请求进行传输。在使用 serialize() 方法序列化表单数据时，需要注意复选框元素的 name 属性需要相同，以便于识别被选中的复选框元素。