微信扫一扫打赏支持

js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么

js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么

打赏

 

一、总结

一句话总结：两者都是对表单进行序列化，serializeArray()返回的是json对象，serialize()返回的是json形式的字符串，使用起来都是一样的

 

1、$（selector).serialize()序列化的话对中文做了什么操作？

为了避免出错，将中文变成了编码，因为内容要提交到服务器，编码可以保证汉字不出错，github上传文件的时候，也是进行的同样的操作

 

2、如何正常显示$（selector).serialize()序列化函数将中文变成的编码？

decodeURIComponent函数

36                         //decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
37                         $('#txt').html(decodeURIComponent($('form').serialize()))

 

3、js如何向控制台输入消息？

console对象的log方法

56                         console.log(obj) //onsole.log() 向web控制台输出一条消息

 

 

 

二、表单序列化函数serializeArray()和serialize()的区别是什么

1、相关知识

表单序列化

  • 语法：$（selector).serialize()

    jQuery的serialize()方法通过序列化表单值，创建URL编码文本字符串，这样，我们就可以把序列化的值传给ajax()作为url的参数，轻松使用ajax()提交form表单了，而不需要一个一个获取表单中的值然后传给ajax()

  • serializeArray()序列化表单元素（类似'.serialize()'方法返回JSON数据结构数据。

    ’’’注意’’’此方法返回的是JSON对象而非JSON字符串。

 

 

2、代码

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style type="text/css">
10       </style>
11 </style>
12 </head>
13 <body>
14     <form id="form1">
15     姓名：<input type="text" name="user"><br>
16     电话：<input type="text" name="Tel"><br>
17           <select name="buy">
18             <option>买新房</option>
19             <option>看二手房</option>
20           </select>
21           <input type="button" value="提交">
22     </form>
23     <div id="txt"></div>
24     <script>
25     /*
26         $(function(){
27             $('form input[type=button]').click(function(){
28                 $.ajax({
29                     type:'POST',
30                     url:'buy.php',
31                     data:$('form').serialize(),
32                     success:function(responseTxt,statusTxt,xhr){
33                         //$('#txt').html($('form').serialize())
34                         //alert($('form').serialize())
35                         //字符串形式的键值对，并且对URL进行了编码
36                         //decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
37                         $('#txt').html(decodeURIComponent($('form').serialize()))
38 
39                     }
40                 })
41 
42             })
43         })
44         */
45         $(function(){
46             $('form input[type=button]').click(function(){
47                 $.ajax({
48                     type:'POST',
49                     url:'buy.php',
50                     data:$('form').serializeArray(),
51                     success:function(responseTxt,statusTxt,xhr){
52                         //$('#txt').html(responseTxt)
53                         var obj=$('form').serializeArray()
54                         //alert(obj)
55                         //$('#txt').html(obj)
56                         console.log(obj) //onsole.log() 向web控制台输出一条消息
57                         //[{name='user',value=''},{name='user',value=''},{name='user',value=''}]
58                         alert(obj[0].name+"=="+obj[0].value)
59                     }
60                 })
61 
62             })
63         })
64     </script>
65 </body>
66 </html>
复制代码

 

 

 

 
posted @   范仁义  阅读(1634)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· AI与.NET技术实操系列（六）：基于图像分类模型对图像进行分类
历史上的今天：
2017-07-20 L2-002. 链表去重
2017-07-20 L2-003. 月饼
侧边栏
打赏
点击右上角即可分享
微信分享提示
SQL AI 助手