jQuery 表单序列化实例代码


Posted in jQuery onJune 11, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所述:

$(function(){
  $('#send').click(function(){
     $.ajax({
       type: "GET",
       url: "test.json",
       data: {username:$("#username").val(), password:$("#password").val()}, // 参数为对象
       dataType: "json",
       success: function(data){
          // code...   
       }
     });
  });
});
$(function(){
  $('#send').click(function(){
    var username = $("#username").val();
    var password = $("#password").val();
    $.ajax({
      type: "GET",
      url: "test.json",
      data: "username"+username+"&password"+password, // 参数为字符串拼接,并用&连接
      dataType: "json",
      success: function(data){
        // code...
      }
    });
  });
});

以上是一段常规的ajax请求代码,其中分别列举了data参数的两种传递格式。

为了简便ajax请求时的data参数获取,jquery定义了几个快速的方法。

1.serialize()

用法:var data = $("form").serialize();

返回值:将表单内容序列化成一个字符串。

这样在ajax提交表单数据时,就不用一一列举出每一个参数。只需将data参数设置为 $("form").serialize() 即可。

      其核心方法是$.param(),用来对一个数组或对象按照key/value进行序列化,

var obj = {first:"one",last:"two"};
var str = $.param(obj);
console.log(str);    // first=one&last=two

另外,使用serialize有个好处是自带中文编译处理。所以,推荐使用serialize。

2.serializeArray()

用法:var jsonData = $("form").serializeArray();

返回值:将页面表单序列化成一个JSON结构(键值对)的对象。

比如,[{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[index].name

综上:在使用ajax提交表单数据时,data参数设置为$(form).serialize()或$(form).serializeArray()都可以。另外有些细节建议参考w3c。

最后补充一个完整实例。

html:

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <form id="demo">
    <input type="text" value="demo1" name="demo1">
    <input type="text" value="demo2" name="demo2">
    <input type="text" value="demo3" name="demo3">
    <input type="submit" value="提交" id="submit">
  </form>
</body>
</html>

JavaScript:

<script>
  // 别忘了引入jquery !!!
  $(function(){
    $("#submit").click(function(){
    // var data = $("form").serializeArray();
      var data = $("form").serialize();
      $.ajax({
        type:"GET",
        url:"1.php",
        data:data,
        dataType:"json",
        success:function(data){
          console.log(data);
        },
        error:function(xhr,error){
          console.log(error);
        }
      })
    })
  })
</script>

php  提醒:需要配置php环境并开启服务器

<?php 
   echo json_encode($_GET);
 ?>

以上所述是小编给大家介绍的jQuery 表单序列化实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jQuery 相关文章推荐
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 #jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 #jQuery
jQuery复合事件用法示例
Jun 10 #jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 #jQuery
jQuery正则验证注册页面经典实例
Jun 10 #jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 #jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 #jQuery
You might like
PHP mkdir()定义和用法
2009/01/14 PHP
PHP学习笔记之一
2011/01/17 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
angular动态表单制作
2018/02/23 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
tornado捕获和处理404错误的方法
2014/02/26 Python
Python使用functools实现注解同步方法
2018/02/06 Python
Python WSGI的深入理解
2018/08/01 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
opencv python图像梯度实例详解
2020/02/04 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
幼师自我鉴定范文
2013/10/01 职场文书
面料业务员岗位职责
2013/12/26 职场文书
应急处置方案
2014/06/16 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
委托函范文
2015/01/29 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers