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插件
Mar 29 jQuery
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 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实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
莱鸟介绍window.print()方法
2016/01/06 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
Angular2 自定义validators的实现方法
2017/07/05 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
python实现数据库跨服务器迁移
2018/04/12 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
python获取栅格点和面值的实现
2020/03/10 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
医科大学生的自我评价
2013/12/04 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
继承权公证书范本
2015/01/23 职场文书
复兴之路观后感
2015/06/02 职场文书
新闻稿怎么写
2015/07/18 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
Python如何加载模型并查看网络
2022/07/15 Python