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中each循环的简单回滚操作
May 05 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
jQuery实现推拉门效果
Oct 19 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
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
类似CSDN图片切换效果脚本
2009/09/17 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
浅谈Python中的闭包
2015/07/08 Python
Python实现的科学计算器功能示例
2017/08/04 Python
Python3中详解fabfile的编写
2018/06/24 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
python 如何停止一个死循环的线程
2020/11/24 Python
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
小学端午节活动方案
2014/03/13 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
个人担保书格式范文
2014/05/12 职场文书
学校就业推荐信范文
2014/05/19 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
南湾猴岛导游词
2015/02/09 职场文书
成绩单家长意见
2015/06/03 职场文书
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫
Nginx限流和黑名单配置
2022/05/20 Servers