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

最新推荐文章于 2022-04-23 16:14:35 发布

weixin_30293135

最新推荐文章于 2022-04-23 16:14:35 发布

阅读量72

点赞数

文章标签： json php javascript ViewUI

原文链接：http://www.cnblogs.com/Renyi-Fan/p/9340689.html

版权

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

转载于:https://www.cnblogs.com/Renyi-Fan/p/9340689.html

weixin_30293135

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫