js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化

一、总结

一句话总结：如果用ajax传递表单的数据，如果不进行表单的序列化，要一个参数一个参数的写，太麻烦，序列化的话，一句代码搞定。data:$(\'form\').serialize()，这样一句话解决复杂的表单ajax的post传值过程。

1、表单序列化函数是什么？

$（selector).serialize()和serializeArray()

24     <script>
25         $(function(){
26             $(\'form input[type=button]\').click(function(){
27                 $.ajax({
28                     type:\'POST\',
29                     url:\'buy.php\',
30                     // data:{
31                     //     user:$(\'form input[name=user]\').val(),
32                     //     Tel:$(\'form input[name=Tel]\').val(),
33      //                      buy:$(\'form select[name=buy]\').val()
34                     // },
35                     data:$(\'form\').serialize(),
36                     success:function(responseTxt,statusTxt,xhr){
37                         //alert(responseTxt)
38                         $(\'#txt\').html(responseTxt)
39                     }
40                 })
41 
42             })
43         })
44     </script>

2、表单序列化函数serialize()如何使用？

$（selector).serialize()，其实设置好监听对象就好了

35                     data:$(\'form\').serialize(),

3、表单序列化的优势是什么（讲解+实例）？

极大的减少代码量和出错

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

24     <script>
25         $(function(){
26             $(\'form input[type=button]\').click(function(){
27                 $.ajax({
28                     type:\'POST\',
29                     url:\'buy.php\',
30                     // data:{
31                     //     user:$(\'form input[name=user]\').val(),
32                     //     Tel:$(\'form input[name=Tel]\').val(),
33      //                      buy:$(\'form select[name=buy]\').val()
34                     // },
35                     data:$(\'form\').serialize(),
36                     success:function(responseTxt,statusTxt,xhr){
37                         //alert(responseTxt)
38                         $(\'#txt\').html(responseTxt)
39                     }
40                 })
41 
42             })
43         })
44     </script>

二、jquery的ajax部分为什么需要对表单进行序列化

1、相关知识

表单序列化

语法：$（selector).serialize()
jQuery的serialize()方法通过序列化表单值，创建URL编码文本字符串，这样，我们就可以把序列化的值传给ajax()作为url的参数，轻松使用ajax()提交form表单了，而不需要一个一个获取表单中的值然后传给ajax()
serializeArray()序列化表格元素（类似\'.serialize()\'方法返回JSON数据结构数据。
’’’注意’’’此方法返回的是JSON对象而非JSON字符串。

2、代码

html

 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         $(function(){
26             $(\'form input[type=button]\').click(function(){
27                 $.ajax({
28                     type:\'POST\',
29                     url:\'buy.php\',
30                     // data:{
31                     //     user:$(\'form input[name=user]\').val(),
32                     //     Tel:$(\'form input[name=Tel]\').val(),
33      //                      buy:$(\'form select[name=buy]\').val()
34                     // },
35                     data:$(\'form\').serialize(),
36                     success:function(responseTxt,statusTxt,xhr){
37                         //alert(responseTxt)
38                         $(\'#txt\').html(responseTxt)
39                     }
40                 })
41 
42             })
43         })
44     </script>
45 </body>
46 </html>

php

<?php
    echo $_POST[\'buy\'].\'---\'.$_POST[\'user\'].\'---\'.$_POST[\'Tel\']
?>