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