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 04 Javascript
jquery 1.4.2发布!主要是性能与API
Feb 25 Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
jQuery操作cookie
Aug 08 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
vue实现信息管理系统
May 30 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
SSI指令
2006/11/25 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
JS如何设置元素样式的方法示例
2017/08/28 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
node创建Vue项目步骤详解
2020/03/06 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
Flask框架web开发之零基础入门
2018/12/10 Python
Python常见数字运算操作实例小结
2019/03/22 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
详解python破解zip文件密码的方法
2020/01/13 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
什么是规则表达式
2012/05/03 面试题
公交公司毕业生求职信
2014/02/15 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
Redis批量生成数据的实现
2022/06/05 Redis