$(" ").serializeArray() 序列化表单

最新推荐文章于 2022-08-08 09:45:23 发布
最新推荐文章于 2022-08-08 09:45:23 发布
阅读量636 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： jQuery 文章标签： jQuery 序列化表单 serializeArray 实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/nuliPerfect/article/details/52163459
本文介绍了一种利用jQuery库简化HTML表单序列化的技术。通过点击按钮即可获取表单中输入字段的名称和值，并将这些信息显示在网页上。此方法有助于快速构建响应式的表单处理功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    x=$("form").serializeArray();
    $.each(x, function(i, field){
      $("#results").append(field.name + ":" + field.value + " ");
    });
  });
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Bill" /><br />
Last name: <input type="text" name="LastName" value="Gates" /><br />
</form>

<button>序列化表单值</button>
<div id="results"></div>
</body>

</html>



jQuery中Ajax函数：$.ajax()、$.post()、$.get()的使用、区别；
小枯林的博客
06-09 4445
本篇博客目的是：在OA系统十九：请假功能五遇到了【layui.$.post()：layui内置的jQuery的Ajax函数：向后台发起post请求；】；对此不太明白，故而本篇博客专门介绍jQuery中Ajax发起请求的内容。 首先，关于jQuery和Ajax可以参考：JQuery对Ajax的支持：简介$.ajax(jsonExpression)；JQuery对Ajax简化和封装简单示例；以及附近相关文章。 目录 0.预先介绍：jQuery AJAX 方法 1.$.ajax() 方法...
serialize() 及 serializeArray()函数的作用
MoxiErtu的博客
01-09 1741
serialize() serializeArray()
jQuery使用serialize(),serializeArray()方法取得表单数据+字符串和对象类型两种表单提交的方法
u013733643的博客
08-08 923
serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。您可以选择一个或多个表单元素（比如 input 及/或文本框），或者 form 元素本身。序列化的值可在生成AJAX请求时用于 URL 查询字符串中。用法$("id"输出结果格式：使用方法：$.ajax({}});这样，我们就可以把序列化的值传给ajax()作为url的参数，轻松使用ajax()提交form表单了，而不需要一个一个获取表单中的值然后传给ajax()，...
2021-01-21$.serializeArray()
cxue2008的专栏
01-21 171
$.serializeArray(); 方法获取不到form里的input值， 原因如下： 1.input的disable为true 2.input没有name属性
jQuery表单序列化方法serialize(),serializeArray()
无痕之意的博客
10-17 5874
  我们使用ajax给后台传递数据的时候，经常要获取表单的数据。表单数据不多还好说，但是如果表单字段非常多，那么无疑是非常头疼的事。如何获取大量的表单数据，是非常重要的事情。 表单页面 &lt;form action=""&gt; &lt;input type="text" name="username1"&gt; &lt;input type="text" name=&quot
serializeArray 与 serialize
hgffhh的博客
01-31 381
serializeArray 与 serialize
serialize()和serializeArray()方法
MikazukiMo的博客
04-22 536
1.serialize()方法 var data = $(“form”).serialize(); 功能：将表单内容序列化成一个字符串。 返回的是 name1=value1&name2=value2 格式 2.serializeArray()方法 var jsonData = $(“form”).serializeArray(); 功能：将页面表单序列化成一个JSON结构的对象 返回的...
Ajax serialize() 表单进行序列化方式上传文件
12-11
通过传统的 form 表单提交的方式上传文件 <form id="uploadForm" action="" method="post" enctype="multipart/form-data"> 上传文件：<...使用 serialize() 对 form 表单进行序列化提交 $.a
关于jquery form表单序列化的注意事项详解
10-19
首先，我们要明白表单序列化的主要方法是`$.serialize()`和`$.serializeArray()`。`$.serialize()`将表单数据转换为字符串，而`$.serializeArray()`则返回一个包含表单元素名称和值的对象数组。 **一、readonly与...
jQuery中验证表单提交方式及序列化表单内容的实现
12-02
在jQuery中，表单提交和验证是...同时，`serializeArray()`方法提供了一种灵活的方式，便于处理和操作序列化的表单数据。在实际开发中，根据项目的特性和需求，合理选择和组合这些方法可以提高代码的效率和用户体验。
jQuery序列化form表单数据为JSON对象的实现方法
10-17
例如，在使用jqgrid插件时，可以通过$.fn.serializeObject方法来序列化表单数据，然后将得到的JSON对象作为参数进行后续操作。通过这种方式，开发者可以将表单数据以更灵活的形式进行处理和提交，更好地适应不同的...
jQuery.serializeArray() 函数详解
weixin_33815613的博客
03-06 215
serializeArray()函数用于序列化一组表单元素，将表单内容编码为一个JavaScript数组。 serializeArray()函数常用于将表单内容序列化为JSON对象，以便于被编码为JSON格式的字符串。 该函数会将可用于提交的每个表单控件封装成一个Object对象，该对象有name和value属性，对应该表单控件的name和value属性。然后将这些Object对象封装为一个数...
序列化表单
求人不如求己
10-19 430
//序列化表单 $.fn.extend({ serializeObject : function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (...
jquery中.serializeArray()的使用及转换成key:value
weixin_43394840的博客
02-29 710
js中表单json数据的转换 这是我的人生第一篇博客 1. $("form").serializeArray(); //作用：将表单的值序列化成：[Object,Object],[Object,Object] JSON对象数组 2. JSON.stringify($("form").serializeArray()); 作用：将JSON对象数组序列化成json数组字符串： [{"name"："n...
Form表单序列化成JSON
weixin_33725239的博客
06-05 341
2019独角兽企业重金招聘Python工程师标准>>> ...
jquery form表单.serialize()序列化后中文乱码问题原因及解决
vipaiou的专栏
05-20 249
[color=red]原因[/color]：.serialize()自动调用了encodeURIComponent方法将数据编码了 [color=red]解决方法[/color]：调用decodeURIComponent(XXX,true);将数据解码 [color=red]例如[/color]： var params = jQuery("#formId").serialize(); // ...
jQuery序列化表单的方法总结（serialize()、serializeArray()）
热门推荐
xinghuo0007的博客
05-23 6万+
jQuery序列化表单的方法总结现在这里贴出案例中静态的html网页内容：<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.2.1.js"></script></head> <body> <for
jquery获取表单数据方法$.serializeArray()获取不到disabled的值
weixin_34072637的博客
05-21 1201
$.serializeArray()获取不到disabled的值 经实验，$.serializeArray()获取不到disabled的值，如果想要让input元素变为不可用，可以把input设为readonly,而不是disabled; 还有一种情况获取不到值，当页面中有两个一样name值的标签的时候，即使其中一个name值的input的样式为 display:none; 依然获取不到。...
$("#dataForm").serialize()和$("#dataForm").serializeArray()
最新发布
07-10
<think>我们正在讨论jQuery中的两个表单序列化方法：serialize()和serializeArray()。根据引用[1]和引用[3]的内容，我们可以总结如下： 1. **serialize()**: - 该方法将表单元素序列化为一个**查询字符串**（URL编码的字符串）。 - 格式示例：`"name=John&age=30&email=john%40example.com"` - 适用于直接作为AJAX请求的data参数传递，特别是使用GET请求或POST请求（Content-Type: application/x-www-form-urlencoded）。 2. **serializeArray()**: - 该方法将表单元素序列化为一个**对象数组**。 - 每个对象代表一个表单字段，包含`name`和`value`属性。 - 格式示例： ```javascript [ { name: "name", value: "John" }, { name: "age", value: "30" }, { name: "email", value: "john@example.com" } ] ``` - 适用于需要进一步处理表单数据（例如，转换为JSON对象）或需要更灵活操作数据的场景。 ### 区别对比表 | 特性 | serialize() | serializeArray() | |--------------------|---------------------------------|--------------------------------| | **返回值类型** | 字符串（URL编码） | 对象数组 | | **数据结构** | `key1=value1&key2=value2`形式 | `[{name:key1, value:value1}, ...]` | | **适用场景** | 直接用于AJAX提交 | 需要手动处理表单数据 | | **数据转换难度** | 直接可用，但解析复杂数据需解码 | 易于转换为JSON对象 | | **多值字段处理** | 自动处理（如复选框多选） | 同样支持多值字段（多个数组项） | ### 使用场景示例 #### 场景1：直接提交表单数据（使用serialize） ```javascript $.ajax({ url: "/submit", type: "POST", data: $("#myForm").serialize(), // 直接序列化为字符串 success: function(response) { console.log("提交成功"); } }); ``` #### 场景2：获取表单数据并转换为JSON对象（使用serializeArray） ```javascript var formArray = $("#myForm").serializeArray(); var formData = {}; // 将数组转换为对象 $.each(formArray, function(i, field){ // 如果字段名重复（如复选框），需要特殊处理（这里会覆盖，所以多值字段需要数组） formData[field.name] = field.value; }); // 或者处理多值字段（例如复选框） var formDataMulti = {}; $.each(formArray, function() { if (formDataMulti[this.name]) { if (!Array.isArray(formDataMulti[this.name])) { formDataMulti[this.name] = [formDataMulti[this.name]]; } formDataMulti[this.name].push(this.value); } else { formDataMulti[this.name] = this.value; } }); // 然后可以将formDataMulti作为JSON发送 $.ajax({ url: "/submit", type: "POST", contentType: "application/json", data: JSON.stringify(formDataMulti), success: function(response) { console.log("提交成功"); } }); ``` ### 注意事项 1. **多选字段处理**：两种方法都能正确处理多选字段（如复选框组、多选下拉框），但在使用`serializeArray()`时，同一个名称的字段会以多个数组项的形式出现，需要手动合并为数组（如上例所示）。 2. **禁用字段**：默认情况下，两个方法都会忽略禁用的表单字段（`disabled`属性）和未选中的复选框/单选框。如果需要包含这些字段，需在调用方法前移除`disabled`属性或特殊处理。 3. **文件上传**：**两者都不支持文件上传**，文件上传需使用`FormData`对象。 ### 引用说明 - `serialize()`和`serializeArray()`的基本用法和区别在引用[1]和引用[3]中均有提及[^1][^3]。 - 在引用[2]中，提到了使用`serialize()`方法作为AJAX请求的数据[^2]。 - 引用[5]强调了表单处理中客户端验证与服务器端验证的结合[^5]。 §§ 相关问题 §§ 1. 如何用`serializeArray()`处理复选框的多选值？ 2. 为什么`serialize()`和`serializeArray()`方法忽略禁用的表单字段？ 3. 除了`serialize()`和`serializeArray()`，还有哪些方法可以处理表单数据？ 4. 如何将表单数据转换为JSON格式？ 5. 文件上传应该使用什么方法？</think>### jQuery中`serialize()`与`serializeArray()`的区别与使用场景 #### 1️⃣ **核心区别** | 特性 | `serialize()` | `serializeArray()` | |--------------------|-----------------------------------|----------------------------------| | **返回值类型** | 字符串 (URL编码格式) | JavaScript对象数组 | | **数据结构** | `key1=value1&key2=value2` | `[{name:key1, value:value1}, ...]` | | **适用场景** | 直接用于AJAX提交 | 需要操作表单数据的场景 | | **示例输出** | `"name=John&age=30&city=NewYork"` | `[{name:"name",value:"John"}, {name:"age",value:"30"}, ...]` | #### 2️⃣ **使用场景对比** - **`serialize()` 最佳场景**： ```javascript // 直接用于AJAX提交 $.ajax({ url: "/submit", type: "POST", data: $("#myForm").serialize(), // 直接作为请求体[^2] success: function(response) { console.log("提交成功"); } }); ``` **适用**：快速提交表单数据，无需额外处理，兼容传统表单格式。 - **`serializeArray()` 最佳场景**： ```javascript // 需要操作表单数据时 const formData = $("#myForm").serializeArray(); // 转换为JSON对象 const jsonData = {}; formData.forEach(item => { jsonData[item.name] = item.value; }); // 添加额外参数 jsonData.timestamp = new Date().getTime(); // 提交处理后的数据 $.post("/api", jsonData); ``` **适用**： - 需要修改或添加额外字段 - 需要转换为JSON格式[^4] - 需要处理多值字段（如复选框组） #### 3️⃣ **特殊数据处理** - **多值字段处理**（如复选框组）： ```javascript // 表单中有同名复选框：<input type="checkbox" name="hobby" value="sports"> const dataArray = $("#form").serializeArray(); // 合并多值字段为数组 const result = {}; dataArray.forEach(item => { if (result[item.name]) { if (!Array.isArray(result[item.name])) { result[item.name] = [result[item.name]]; } result[item.name].push(item.value); } else { result[item.name] = item.value; } }); // 输出: {hobby: ["sports", "music"]} ``` #### 4️⃣ **注意事项** 1. **忽略禁用字段**：两者都自动忽略`disabled`的表单字段[^3] 2. **文件上传**：**都不支持文件上传**，需用`FormData`对象 3. **编码差异**： - `serialize()` 自动进行URL编码 - `serializeArray()` 保留原始值 4. **性能**：小表单差异可忽略，大表单`serialize()`略快 #### 5️⃣ **选择建议** - 直接提交 ➔ `serialize()` - 数据处理/转换 ➔ `serializeArray()` - 文件上传 ➔ 使用 `new FormData()` > 引用说明：表单序列化方法在引用[1][^1]和引用[3][^3]中均有提及，数据转换技巧参考引用[4][^4]，AJAX集成参考引用[2][^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值