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

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style type="text/css">

       </style>

 </style>

 </head>

 <body>

     <form id="form1">

     姓名：<input type="text" name="user"><br>

     电话：<input type="text" name="Tel"><br>

           <select name="buy">

             <option>买新房</option>

             <option>看二手房</option>

           </select>

           <input type="button" value="提交">

     </form>

     <div id="txt"></div>

     <script>

         $(function(){

             $('form input[type=button]').click(function(){

                 $.ajax({

                     type:'POST',

                     url:'buy.php',

                     // data:{

                     //     user:$('form input[name=user]').val(),

                     //     Tel:$('form input[name=Tel]').val(),

      //                      buy:$('form select[name=buy]').val()

                     // },

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

                     success:function(responseTxt,statusTxt,xhr){

                         //alert(responseTxt)

                         $('#txt').html(responseTxt)

                     }

                 })

             })

         })

     </script>

 </body>

 </html>

php

<?php

    echo $_POST['buy'].'---'.$_POST['user'].'---'.$_POST['Tel']

?>
 

js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化的更多相关文章

  1. js进阶 14 jquery的ajax有哪些函数和事件（多练）

    js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结 一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...

  2. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  3. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  4. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  5. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  6. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  7. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  8. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  9. js源码 模仿 jquery的ajax的获取数据（get，post ）的请求封装

    function ajax(obj){ // 默认参数 var defaults = { type : 'get', data : {}, url : '#', dataType : 'text', ...

随机推荐

  1. POJ2411 状态压缩dp

    POJ2411 http://poj.org/problem?id=2411

  2. MySQL Server 5.5.44免安装版配置详解

    转载地址:http://wenku.baidu.com/view/2a8bfe6a25c52cc58bd6beff.html### 一 下载MySQL http://dev.mysql.com/dow ...

  3. Java基础算法

    i++;++i; i--;--i; int a=5;int b=a++;++放在后面,表示先使用a的值,a再加1b=5,a=a+1,a=6 int c=5;int d=++c;++放在前面,表示先将c ...

  4. Js怎么获取DOM及获取浏览器的宽高？

    在JavaScript中,经常会需要获取document文档元素,是HTML文档对象模型的缩写,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. ...

  5. Firefox 浏览器有用的插件

    1.Undo Closed Tabs Button或Undo Closed Tabs Button (revived) 恢复关闭的标签页 2.NetVideohunter Video Download ...

  6. scp---远程拷贝文件

    scp命令用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器硬盘变为只读read onl ...

  7. gvim window7 下提示乱码

    今天在win7下安装gvim的时候,发现所有的提示信息都是乱码的,在网上找到了如下的解决方案.在此记录下,方便以后查阅. 以下内容转载自http://blog.csdn.net/rehung/arch ...

  8. js插件---10个免费开源的JS音乐播放器插件

    js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...

  9. javascript进阶教程第一章案例实战

    javascript进阶教程第一章案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过练习积累JS的使用技巧 二.实例 练习1:删除确认提示框 实例描述: 防止用户小心单击了“删除”按钮,在用 ...

  10. es6 --- Generator 函数

    第一部分,ES6 中的 Generator 在 ES6 出现之前,基本都是各式各样类似Promise的解决方案来处理异步操作的代码逻辑,但是 ES6 的Generator却给异步操作又提供了新的思路, ...