js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化

一、总结

一句话总结：如果用ajax传递表单的数据，如果不进行表单的序列化，要一个参数一个参数的写，太麻烦，序列化的话，一句代码搞定。data:$('form').serialize()，这样一句话解决复杂的表单ajax的post传值过程。

1、表单序列化函数是什么？

$（selector).serialize()和serializeArray()

  1. 24     <script>
  2. 25         $(function(){
  3. 26             $('form input[type=button]').click(function(){
  4. 27                 $.ajax({
  5. 28                     type:'POST',
  6. 29                     url:'buy.php',
  7. 30                     // data:{
  8. 31                     //     user:$('form input[name=user]').val(),
  9. 32                     //     Tel:$('form input[name=Tel]').val(),
  10. 33      //                      buy:$('form select[name=buy]').val()
  11. 34                     // },
  12. 35                     data:$('form').serialize(),
  13. 36                     success:function(responseTxt,statusTxt,xhr){
  14. 37                         //alert(responseTxt)
  15. 38                         $('#txt').html(responseTxt)
  16. 39                     }
  17. 40                 })
  18. 41
  19. 42             })
  20. 43         })
  21. 44     </script>

2、表单序列化函数serialize()如何使用？

$（selector).serialize()，其实设置好监听对象就好了

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

3、表单序列化的优势是什么（讲解+实例）？

极大的减少代码量和出错

jQuery的serialize()方法通过序列化表单值，创建URL编码文本字符串，这样，我们就可以把序列化的值传给ajax()作为url的参数，轻松使用ajax()提交form表单了，而不需要一个一个获取表单中的值然后传给ajax()

  1. 24     <script>
  2. 25         $(function(){
  3. 26             $('form input[type=button]').click(function(){
  4. 27                 $.ajax({
  5. 28                     type:'POST',
  6. 29                     url:'buy.php',
  7. 30                     // data:{
  8. 31                     //     user:$('form input[name=user]').val(),
  9. 32                     //     Tel:$('form input[name=Tel]').val(),
  10. 33      //                      buy:$('form select[name=buy]').val()
  11. 34                     // },
  12. 35                     data:$('form').serialize(),
  13. 36                     success:function(responseTxt,statusTxt,xhr){
  14. 37                         //alert(responseTxt)
  15. 38                         $('#txt').html(responseTxt)
  16. 39                     }
  17. 40                 })
  18. 41
  19. 42             })
  20. 43         })
  21. 44     </script>

二、jquery的ajax部分为什么需要对表单进行序列化

1、相关知识

表单序列化

  • 语法：$（selector).serialize()

    jQuery的serialize()方法通过序列化表单值，创建URL编码文本字符串，这样，我们就可以把序列化的值传给ajax()作为url的参数，轻松使用ajax()提交form表单了，而不需要一个一个获取表单中的值然后传给ajax()

  • serializeArray()序列化表格元素（类似'.serialize()'方法返回JSON数据结构数据。

    ’’’注意’’’此方法返回的是JSON对象而非JSON字符串。

 

2、代码

html

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <style>
  4.  </style>
  5.  <head>
  6.      <meta charset="UTF-8">
  7.      <title>演示文档</title>
  8.      <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
  9.      <style type="text/css">
  10.        </style>
  11.  </style>
  12.  </head>
  13.  <body>
  14.      <form id="form1">
  15.      姓名：<input type="text" name="user"><br>
  16.      电话：<input type="text" name="Tel"><br>
  17.            <select name="buy">
  18.              <option>买新房</option>
  19.              <option>看二手房</option>
  20.            </select>
  21.            <input type="button" value="提交">
  22.      </form>
  23.      <div id="txt"></div>
  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>
  45.  </body>
  46.  </html>

php

  1. <?php
  2.     echo $_POST['buy'].'---'.$_POST['user'].'---'.$_POST['Tel']
  3. ?>
 

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. 15.C语言多线程实现变色龙以及cmd窗口标题变化

    #define _CRT_SECURE_NO_WARNINGS #include <stdlib.h> #include <stdio.h> #include <Wind ...

  2. 线性同余同余方程组解法（excrt）

    [问题描述] 求关于 x 的同余方程组 x%a 1 =b 1  a1=b1 x%a 2 =b 2  a2=b2 x%a 3 =b 3  a3=b3 x%a 4 =b 4  a4=b4 的大于等于 0 ...

  3. iRedMail邮件系统配置简易视频安装教程

    iRedMail邮件系统配置简易视频安装教程        iRedMail邮件系统配置简易视频安装教程 iRedMail中文名为“艾瑞得邮件系统”, 属于开源的企业邮件解决方案,但其性能不逊于任何商 ...

  4. Hyper-v Server安装与配置-新加GUI界面配置工具介绍

    650) this.width=650;" onclick='window.open("http://blog.51cto.com/viewpic.php?refimg=" ...

  5. Linux VNC客户端软件VNC Viewer | RealVNC

    Linux很多时候是作为服务器操作系统,如果是桌面系统通常情况会远程管理linux服务器,很多时候通过VNC进行远程管理,这个时候就要在客户端安装VNC客户端软件,VNC Viewer | RealV ...

  6. MyEclipse的代码自动提示功能

     一般默认情况下,Eclipse ,MyEclipse的代码提示功能是比Microsoft Visual Studio的差很多的,主要是Eclipse ,MyEclipse本身有很多选项是默认关闭的, ...

  7. caioj 1066 动态规划入门（一维一边推4：护卫队）（分组型dp总结）

    很容易想到f[i]为前i项的最优价值,但是我一直在纠结如果重量满了该怎么办. 正解有点枚举的味道. 就是枚举当前这辆车与这辆车以前的组合一组,在能组的里面取最优的. 然后要记得初始化,因为有min,所 ...

  8. Windows7下修改pip源

    以下列举三种方式的pip源配置: 1. 设置环境变量PIP_CONFIG_FILE指向pip.ini源配置文件,pip.ini文件内容如下: [global] index-url = http://m ...

  9. 几种类型的db，以及最新的db排名，看一下

    5月数据库排名: http://geek.csdn.net/news/detail/196118 另外这篇文章里面提到了一些内嵌式数据库: http://blog.csdn.net/leagoal/a ...

  10. Linux经常使用命令(十六) - whereis

    whereis命令仅仅能用于程序名的搜索(程序安装在哪?).并且仅仅搜索二进制文件(參数-b).man说明文件(參数-m)和源码文件(參数-s). 假设省略參数,则返回全部信息. 和find相比.wh ...