JQuery中Ajax()的data参数类型实例分析


Posted in Javascript onDecember 15, 2015

本文实例分析了JQuery中Ajax()的data参数类型。分享给大家供大家参考,具体如下:

前面简单分析介绍了《ajax中data传参的两种方式》,对于ajax参数传递方式有了初步的了解,这里就来进一步分析一下ajax中data参数的类型。

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

<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程序设计有所帮助。

Javascript 相关文章推荐
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
JS中的public和private对象,即static修饰符
Jan 18 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
理解javascript闭包
Dec 15 #Javascript
jQuery检测滚动条是否到达底部
Dec 15 #Javascript
js实现根据身份证号自动生成出生日期
Dec 15 #Javascript
浅析javascript的return语句
Dec 15 #Javascript
轻松学习Javascript闭包函数
Dec 15 #Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 #Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 #Javascript
You might like
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
PHP时间类完整代码实例
2021/02/26 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
Firefox div高度自适应
2009/04/28 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
Python新手学习装饰器
2020/06/04 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
智能旅行箱:Horizn Studios
2018/04/30 全球购物
优秀教师单行材料
2014/12/16 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
公司回复函格式
2015/07/14 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书