JQuery.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提交。
以前我们是这样实现的:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
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"这样的就可以了。 原文地址:http://www.cnblogs.com/haitao-fan/p/3908973.html
(个人觉得原文的某些评论也很有营养)
JQuery.Ajax()的data参数类型的更多相关文章
- JQuery.Ajax()的data参数传递方式
最近,新学c# mvc,通过ajax post方式传递数据到controller.刚开始传递参数,controller中总是为null.现记录一下,可能不全,纯粹记个学习日记. 重点在于参数的方式,代 ...
- jQuery ajax的traditional参数的作用///////////////////////////////////zzzzzzzzzzz
jQuery ajax的traditional参数的作用 i33 发布时间: 2013/04/03 10:05 阅读: 9859 收藏: 9 点赞: 1 评论: 0 一般的,可能有些人在一个参数有多个 ...
- jQuery Ajax Post Data Example
http://www.formget.com/jquery-post-data/ jQuery Ajax Post Data Example Fugo Of FormGet jQuery $.post ...
- 关于Jquery中ajax方法data参数用法的总结
data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...
- jQuery.ajax()的相关参数及使用
jQuery.ajax(),有很多项参数,小弟菜鸟级别,有时候想不起来,现在记录下来便于以后查看,也欢迎大神指正. 常用的几类,可以称为模板样式写法: $.ajax({ url: "url& ...
- jQuery ajax中的参数含义
所有options均可选,下面简要说明每个option 1.async 默认为true,即请求为异步请求,这也是ajax存在的意义.但同时也可以将这个参数设置为false,实现同步请求.(同步请求会锁 ...
- jQuery ajax的traditional参数的作用
一般的,可能有些人在一个参数有多个值的情况下,可能以某个字符分隔的形式传递,比如页面上有多个checkbox: ? 1 2 3 4 5 6 $.ajax{ url:"xxxx&q ...
- jQuery ajax传递特殊字符参数(例如+)
使用jQuery ajax向后台传递参数para=1+1时后台接收到的参数为para=1 1,解决方案是 使用json传递,代码如下. var url = "/test/check" ...
- jquery ajax中data属性详解
$.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , ...
随机推荐
- js隐藏div和class
<style type="text/css"> //div用点//class# .footer { display:none; } #footer { displ ...
- DECO 一个REACT NAtive 开发IDE工具
DECO 一个REACT NAtive 开发IDE工具. 目前只支持 OS,NO WINDOWS https://www.decosoftware.com/ 一个方便的快速 ERXPRESS 教程:h ...
- pip安装简单方法
前提:有网络 wget -c --no-check-certificate https://bootstrap.pypa.io/get-pip.py python get-pip.py
- 算法手记 之 数据结构(并查集详解)(POJ1703)
<ACM/ICPC算法训练教程>读书笔记-这一次补上并查集的部分.将对并查集的思想进行详细阐述,并附上本人AC掉POJ1703的Code. 在一些有N个元素的集合应用问题中,通常会将每个元 ...
- Match:Period(POJ 1961)
Period 题目大意:给定一个字符串,要你找到前缀重复了多少次 思路,就是kmp的next数组的简单应用,不要修正next的距离就好了,直接就可以跳转了 PS:喝了点酒用递归实现除法和取余了...结 ...
- Divide and conquer:Moo University - Financial Aid(POJ 2010)
Moo University - Financial Aid 其实是老题了http://www.cnblogs.com/Philip-Tell-Truth/p/4926008.html 这一次我们换二 ...
- jquery[siblings]取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合,用于筛选同辈元素的表达式 $("#pageList").click(function(){ $(this).pa ...
- oc弹出框显示提示消息
- (void)ShowHUDTitle:(NSString *)title andDelay:(NSTimeInterval)delayTime { if (HUD) { [HUD removeFr ...
- 73. Set Matrix Zeroes
题目: Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in place. Fo ...
- linux初体验
linux系统和window一样,也是一套独立的操作系统,它只是没有图形化界面而已