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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jquery插件实现搜索历史
Apr 24 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搜索文件程序分享
2015/10/30 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
建筑施工员岗位职责
2013/11/26 职场文书
经贸日语专业个人求职信范文
2013/12/28 职场文书
应届毕业生求职自荐书
2014/01/03 职场文书
项目考察欢迎辞
2014/01/17 职场文书
电工工作职责范本
2014/02/22 职场文书
美食节策划方案
2014/05/26 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server