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方法
56console.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)53var obj=$('form').serializeArray()54//alert(obj)55//$('#txt').html(obj)56console.log(obj) //onsole.log() 向web控制台输出一条消息57//[{name='user',value=''},{name='user',value=''},{name='user',value=''}]58alert(obj[0].name+"=="+obj[0].value)59 }60 })61 62 })63 })64</script>65 </body>66 </html>
