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 相关文章推荐
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
javascript cookie的简单应用
Feb 24 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
简单实现js放大镜效果
Jul 24 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 Javascript
理解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 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
Js切换功能的简单方法
2010/11/23 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
js实现选项卡效果
2020/03/07 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
Python随手笔记之标准类型内建函数
2015/12/02 Python
python查看微信好友是否删除自己
2016/12/19 Python
详解python单元测试框架unittest
2018/07/02 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
体育老师的教学自我评价分享
2013/11/19 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
安全生产协议书
2016/03/22 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python