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>