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制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jQuery实现本地存储
Dec 22 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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 CURL用法的深入分析
2013/06/09 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
JS原生瀑布流效果实现
2019/04/26 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
Python中关键字is与==的区别简述
2014/07/31 Python
python生成excel的实例代码
2017/11/08 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
Python语言进阶知识点总结
2019/05/28 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
美国在线工具商店:Acme Tools
2018/06/26 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
公司财务工作总结的自我评价
2013/11/23 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
合作意向书范本
2019/04/17 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
Python快速实现一键抠图功能的全过程
2021/06/29 Python