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实现广告条滚动效果
Aug 22 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
[jQuery] 事件和动画详解
Mar 05 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
乐信RP2100的电路分析和打磨
2021/03/02 无线电
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
react-native封装插件swiper的使用方法
2018/03/20 Javascript
Vue常见面试题整理【值得收藏】
2018/09/20 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
Python enumerate遍历数组示例应用
2008/09/06 Python
python使用webbrowser浏览指定url的方法
2015/04/04 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
python反编译学习之字节码详解
2019/05/19 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
浙大网新C/C++面试解惑
2015/05/27 面试题
庆元旦文艺演出主持词
2014/03/27 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL