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把获取到的input值转换成json
May 15 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 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原理之异常机制深入分析
2010/08/08 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
详解react-redux插件入门
2018/04/19 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
台湾良兴购物网:EcLife
2019/12/01 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
汉语言文学职业规划
2014/02/14 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
2014年教研员工作总结
2014/12/23 职场文书
班主任工作实习计划
2015/01/16 职场文书
执行力心得体会范文
2016/01/11 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书