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请求servlet实现ajax异步请求的示例
Jun 03 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 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实现百度网盘图片直链的代码分享
2012/11/01 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
简单的自定义php模板引擎
2016/08/26 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
JS与C#编码解码
2013/12/03 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
python端口扫描系统实现方法
2014/11/19 Python
详解Django中的权限和组以及消息
2015/07/23 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
生物科学专业个人求职信范文
2013/12/05 职场文书
小组合作学习反思
2014/02/18 职场文书
新品发布会策划方案
2014/06/08 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
贷款担保书
2015/01/20 职场文书
早会开场白台词大全
2015/06/01 职场文书
建党伟业的观后感
2015/06/01 职场文书
2016年公司新年寄语
2015/08/17 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python