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