jQuery.Ajax()的data参数类型详解


Posted in jQuery onJuly 23, 2017

假如现在有这样一个表单,是添加元素用的。

<form id='addForm' action='UserAdd.action' type='post'>
   <label for='uname'>用户名</label>:<input type='text' name='uname' id='uname'><br>
   <label for='mobileIpt'>手机号:</label><input type='text' name='mobileIpt' id='mobileIpt'><br>
   <label for='birthday'>生日:</label><input type='text' name='birthday'><br>
   <input type='button' value='提交' onclick='addUser()'>
</form>

我们不想使用表单submit的方式添加这个元素,我们就想使用ajax提交。

以前我们是这样实现的:

function addUser(){
    var user = {
      uname:$("#uname").val(),
      mobileIpt:$("#mobileIpt").val(),
      birthday:$("#birthday").val()
    };
    $.ajax({
      url:'UserAdd.action',
      data:user,
      type:'post',
      dataType:'text',
      success:function(msg){
        if(msg=='1'){
          console.log('添加成功');
        }else{
          console.log('添加失败')
        }
      }
       
    })
  }

这没有什么错,就是获取表单元素的值实在是太麻烦....这里只有三项,很多项的时候就废了....

直到有一天,我发现了jquery的serializeArray方法

序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。

注意,此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。

返回的JSON对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对——name参数和value参数(如果value不为空的话)。

我们来试试看

$('#addForm').serializeArray();
//返回数据结构,是json数组,每个对像分别name和value为key,代表这个表单元素的name和value
[
  {"name":"uname","value":""},
  {"name":"mobileIpt","value":""},  
  {"name":"birthday","value":""}
]

这个貌似用不上啊

我们使用JQuery.param()方法处理一下:

var arr = $('#addForm').serializeArray();
$.param(arr);
"uname=alice&mobileIpt=110&birthday=1983-05-12"

嘿这下符合我们的需求了吧,虽然不是json类型,但是至少可以作为data上传了。

这里我们可以直接在ajax的data处填上这个json数组,在jquery内部自己调用$.param()处理的。

我们来看下jquery.param()方法的说明:

返回值:StringjQuery.param(obj,[traditional])

将表单元素数组或者对象序列化。

参数

obj,[traditional]

数组或jQuery对象会按照name/value对进行序列化,普通对象按照key/value对进行序列化。

traditional:是否使用传统的方式浅层序列化。

demo:

$.param({uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'});
"uanme=vic&mobileIpt=110&birthday=2013-11-11"

看着说明,貌似也跟我们没关系啊,我们换一个json数组来看

$.param([{uanme:'vic'},{mobileIpt:'110'},{birthday:'2013-11-11'}]);
"undefined=&undefined=&undefined="

这个转换不成功了吧,为什么我们表单的那种数据能够成功转换成url参数呢?我们来看下jquery源码

//在ajax()方法中,对json类型的数据进行了$.param()处理
if ( s.data && s.processData && typeof s.data !== "string" ) {
  s.data = jQuery.param( s.data, s.traditional );
}
//param方法中
if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
    // Serialize the form elements
    jQuery.each( a, function() {
      add( this.name, this.value );
    });
  } else {
    // If traditional, encode the "old" way (the way 1.3.2 or older
    // did it), otherwise encode params recursively.
    for ( prefix in a ) {
      buildParams( prefix, a[ prefix ], traditional, add );
    }
  }

这下明白了吧,如果是json数据,那么挨个循环,只取他们的name属性和value属性拼接字符串。

如果是普通对象,循环该对象的属性,然后拼接字符串。

总结:

所以,本文要说的是,在jquery的ajax函数中,可以传入3种类型的数据

1.文本:

"uname=alice&mobileIpt=110&birthday=1983-05-12"

2.json对象:

{uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'}

3.json数组:

[
  {"name":"uname","value":"alice"},
  {"name":"mobileIpt","value":"110"},  
  {"name":"birthday","value":"2012-11-11"}
]

所以,我们可以一键获取表单并提交,非常方便。补充:其实提取表单数据的话只需要serialize()方法直接获取"uname=alice&mobileIpt=110&birthday=1983-05-12"这样的就可以了。

以上所述是小编给大家介绍的jQuery.Ajax()的data参数类型详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jQuery 相关文章推荐
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
jquery实现拖拽小方块效果
Dec 10 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 #jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 #jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 #jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 #jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 #jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 #jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 #jQuery
You might like
Terran热键控制
2020/03/14 星际争霸
PHP安装攻略:常见问题解答(三)
2006/10/09 PHP
Discuz! Passport 通行证整合
2008/03/27 PHP
PHP编程函数安全篇
2013/01/08 PHP
PHP多文件上传实例
2015/07/09 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
详解php实现页面静态化原理
2017/06/21 PHP
Symfony查询方法实例小结
2017/06/28 PHP
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
vuejs指令详解
2017/02/07 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
JS删除数组里的某个元素方法
2018/02/03 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
python 整数越界问题详解
2019/06/27 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
Python如何读取、写入JSON数据
2020/07/28 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
水污染治理专业毕业生推荐信
2013/11/14 职场文书
党员四风剖析材料
2014/08/27 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
2014年管理工作总结
2014/11/22 职场文书
加薪通知
2015/04/25 职场文书
黄河绝恋观后感
2015/06/08 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书