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. 如何组织CSS？

    前端工程师在开发一个单页面或者小网站的时候有可能不会在意CSS的组织问题,但如果要开发一个中大型的网站,就要好好的组织CSS文件,不然会增加维护成本,整个网站的结构也没条理性. 如何组织CSS?一般常 ...

  2. Swift vs C# Go OC

    Swift vs C#    mod=view&aid=21" target="_blank">http://www.swifthumb.com/porta ...

  3. 把文件保存到 sdcard

    直接上代码: package com.example.test; import java.io.File; import java.io.FileNotFoundException; import j ...

  4. es62

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jquery12 queue() : 队列方法

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  6. QQ 5.0的一些特效学习 一

    虽然QQ5.0已经过去很久了,但是有些特效还是值得学习的 效果: 源码点我 导入的jar包, 一个是高版本的support.v4包,需要这个v4包中有ViewDragHelper. 我这里使用的是su ...

  7. TCP连接状态详解

    tcp状态: LISTEN:侦听来自远方的TCP端口的连接请求 SYN-SENT:再发送连接请求后等待匹配的连接请求 SYN-RECEIVED:再收到和发送一个连接请求后等待对方对连接请求的确认 ES ...

  8. ajax 使用 与 缓存问题

    1:GET访问 浏览器 认为 是等幂的 就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配] 所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结 ...

  9. 浏览器下管理Linux系统--记webmin的使用

    本文介绍一款浏览器方式来管理linux的一种方式,这款软件就叫webmin,Webmin 让您能够在远程使用支持 HTTPS (SSL 上的 HTTP)协议的 Web 浏览器通过 Web 界面管理您的 ...

  10. 分享一下10个常用jquery片段

      1. 图片预加载 (function($) { var cache = []; // Arguments are image paths relative to the current page. ...