jQuery | serializeArray() 方法与示例

概述

serializeArray() 是 jQuery 中的一个方法，用于将表单元素的数据序列化为一个以 JavaScript 对象表示的数组。

语法

$(selector).serializeArray()

返回值

serializeArray() 方法返回一个包含表单元素数据的数组。每个元素都是一个对象，具有 name 和 value 属性。

示例

考虑一个简单的 HTML 表单，包含用户名、密码和性别字段。

<form id="myForm">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" value="John Doe">

  <label for="password">密码：</label>
  <input type="password" id="password" name="password" value="secretpass">

  <label for="gender">性别：</label>
  <input type="radio" name="gender" value="male" checked> 男
  <input type="radio" name="gender" value="female"> 女

  <button type="button" id="submitBtn">提交</button>
</form>

<p id="result"></p>

使用 serializeArray() 方法获取表单数据，并将其显示在页面上：

$(document).ready(function(){
  $("#submitBtn").click(function(){
    var formdata = $("#myForm").serializeArray();
    var result = "";

    $.each(formdata, function(index, field){
      result += field.name + ":" + field.value + "<br>";
    });

    $("#result").html(result);
  });
});

在上述示例中，点击 "提交" 按钮后，会使用 serializeArray() 方法来获取表单数据，并将其添加到 result 元素中展示。使用 $.each() 方法遍历序列化后的数组，将每个元素的 name 和 value 属性添加到 result 变量中。

结论

serializeArray() 方法是 jQuery 中一个非常有用的方法，能轻松序列化表单数据为一个对象数组。使用它可以快速获取和处理表单数据，减少繁琐的手动取值操作。