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. java中replaceAll反斜杠\ or java中replaceAll 括号[

    java中replaceAll反斜杠\   String s=new String("this is a \\"); s.replaceAll("\\",&qu ...

  2. Flex之文件目录浏览器实例

    Flex之文件目录浏览器实例 Flex的AIR项目 <?xml version="1.0" encoding="utf-8"?> <mx:Wi ...

  3. CentOS桥接网卡配置

    网桥方式配置步骤 1.增加网桥设备br0 vi /etc/sysconfig/network-scripts/ifcfg-br0 DEVICE=br0 ONBOOT=yes TYPE=Bridge B ...

  4. JAVA数组的基本方法

    数组的基本方法 数组可以存放多个数据,多个数据类型要统一数组格式: 格式一:常用写法 数组类型[] 数组名称 = new 数据类型[数组长度]; 格式二:蛋疼写法 数组类型[] 数组名称; 数组名称 ...

  5. ios程序启动过程和UIWidnow介绍

    一.iOS程序的完整启动过程(有storyboard) 1.先执行main函数,main内部会调用UIApplicationMain函数 2.UIApplicationMain函数里面做了什么事情: ...

  6. java同步包种ArrayBlockingQueue类的分析与理解

    前言: ArrayBlockingQueue类是一个堵塞队列.重要用于多线程操作的条件. 一,官方解释 一个建立在数组之上被BlockingQueue绑定的堵塞队列.这个队列元素顺序是先进先出.队列的 ...

  7. Intel TBB in OpenCASCADE

    Intel TBB in OpenCASCADE eryar@163.com OpenCASCADE使用了一个开源的第三方库Intel TBB,这个并行计算库主要用于网格化.布尔操作等复杂算法,可以明 ...

  8. 深入理解Android（1）——理解Android中的JNI（上）

    我参加了CSDN博客之星评选,如果在过去的一段时间里阳光小强的博客对你有所帮助,在这里希望能投上您宝贵的一票,每天都可以投一次:http://vote.blog.csdn.net/blogstar20 ...

  9. HttpWebRequest使用证书请求

    HttpWebRequest使用证书请求 //是否使用证书                if (isUseCert)                {                    stri ...

  10. css3--简单的加载动画

    .load-container { width: 30%; height: auto; position: relative; margin: 1rem auto; } .load { width: ...