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']
?>