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. BZOJ 1146 二分+链剖+线段树+treap

    思路: 恶心的数据结构题-- 首先 我们 链剖 把树 变成序列 再 套一个 区间 第K大就好了-- 复杂度(n*log^4n) //By SiriusRen #include <cstdio&g ...

  2. 洛谷P2598 [ZJOI2009]狼和羊的故事

    题目描述 “狼爱上羊啊爱的疯狂,谁让他们真爱了一场:狼爱上羊啊并不荒唐,他们说有爱就有方向．．．．．．” Orez听到这首歌,心想:狼和羊如此和谐,为什么不尝试羊狼合养呢?说干就干! Orez的羊狼圈 ...

  3. maven pom下载不了

    Downloading: http://repo.maven.apache.org/maven2/org/apache/maven/plugins/maven-clean-plugin/2.4.1/m ...

  4. win7系统 连接打印机 提示 “正在检查 windows update 需要一段时间”

    现象:  在客户端 添加 打印机时,出现  “网络安装打印机 一直在检查 windows update”  提示 处理:等待上述提示结束后,会出现手动添加 提示窗口,在框内选择打印机驱动 .

  5. 联想杨天 S4130-12 win10改win7 bios参数设置

    一.进入bios 开机后按 F1 二.改bion参数 1.移动到 save& Exit  ,修改 OS optimized defaults   为“Disbled” 再 “F9” 保存 2. ...

  6. monyer教你玩电脑——CSS、HTML、JS、XML的关系

    首先Monyer还是有必要提一句:这是一篇低中等难度的文章.如果你是高手或被认为是高手,那么请pass掉这篇文章:如果你是新手,甚至不知道什么是css(譬如百度模版)等,那么请pass掉这篇文章.谢谢 ...

  7. 利用gradle加入构建版本

    在java的程序中,貌似都没有这个构建版本的概念.用的诸如eclipse. idea和android studio的IDE也没有直接提供构建版本的选项.只是我却想在android程序的版本其中加入一个 ...

  8. 56.如何清除已经设置的npm config配置

    npm config delete registry npm config delete disturl 或者 npm config edit 找到淘宝那两行,删除

  9. API(Application Programming Interface,应用程序编程接口)

    API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码 ...

  10. ORM进阶：Hibernate的优劣对照

    hibernate是一种是轻量级的ORMapping框架.学过EntityFramework的.会感觉挺亲切的. 对于各种层次程序猿对数据库的设计: 小菜程序员这样做:首先考虑数据的存储,对于功能的实 ...