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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 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防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
js验证表单第二部分
2006/11/25 Javascript
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
编写Python的web框架中的Model的教程
2015/04/29 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
实例讲解Python爬取网页数据
2018/07/08 Python
python实现归并排序算法
2018/11/22 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
新加坡交友网站:be2新加坡
2019/04/10 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
高中考试作弊检讨书
2014/01/14 职场文书
新任教师自我鉴定
2014/02/24 职场文书
我为自己代言广告词
2014/03/18 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
新学期教师寄语
2014/04/02 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
详解MySQL的内连接和外连接
2023/05/08 MySQL