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>