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 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
jQuery操作css样式
May 15 jQuery
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
php后台程序与Javascript的两种交互方式
2009/10/25 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
python找出完数的方法
2018/11/12 Python
Python定时器线程池原理详解
2020/02/26 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
python如何变换环境
2020/07/21 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
物业工作计划书
2014/01/10 职场文书
秘书英文求职信范文
2014/01/31 职场文书
会计岗位职责范本
2014/03/07 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
音乐教师个人总结
2015/02/06 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书