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. POJ 1636 DFS+DP

    思路: 先搜索出来如果选这个点 其它哪些点必须选 跑个背包就好了 //By SiriusRen #include <cstdio> #include <cstring> #in ...

  2. Gym - 100338C Important Roads 最短路+tarjan

    题意:给你一幅图,问有多少条路径使得去掉该条路后最短路发生变化. 思路:先起始两点求两遍单源最短路,利用s[u] + t[v] + G[u][v] = dis 找出所有最短路径,构造新图.在新图中找到 ...

  3. springmvc使用jQuery.datatable时遇到的错误

    springmvc使用jQuery.datatable时遇到的错误 1正确时返回 josn结果: {,,,,,,,,,,,,,,,,"} 页面显示处理中(processing),列表空白,其 ...

  4. BZOJ1367: [Baltic2004]sequence(左偏树)

    Description Input Output 一个整数R Sample Input 7 9 4 8 20 14 15 18 Sample Output 13 解题思路: 有趣的数学题. 首先确定序 ...

  5. vim7.4官方源码在vs2013的编译方法及问题总结

    vim7.4发布也有一段时候了,也该是把之前编译的7.3重新编译一下了,于是考虑着到最新的visual studio 2013编译一下,也顺便看看有没有其它问题. 1.安装vs2013,这个应该不用说 ...

  6. ls---显示文件目录各项信息

    ls命令用来显示目标列表,在Linux中是使用率较高的命令.ls命令的输出信息可以进行彩色加亮显示,以分区不同类型的文件. 语法 ls(选项)(参数) 选项 -a:显示所有档案及目录(ls内定将档案名 ...

  7. IDEA全局更改统一编码为utf-8

    File -> Other Settings->Deaault Settings->Settings->File Encodings -> Defaule encodin ...

  8. EditPlus,UltraEdit等编辑器列选择的方法

    在使用富文本编辑器的时候,通常模式是行选择状态,由于今天想使用EditPlus列选择状态, 于是通过在网上收集的资料,总结出相关富文本编辑器的列选择的方法. EditPlus  1)菜单:编辑 -&g ...

  9. codevs 1019 集合论与图论

    1019 集合论与图论  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 集合论与图论对于小松来说 ...

  10. 对string的一些扩展函数

    对string作了一些扩展,包含string转化为int.string转化为double.string转化为bool.打印系统当前时间.但没有解决数据溢出的问题,请大神帮忙解决! //头文件 /*pa ...