JQuery.Ajax()的data参数类型

JQuery.Ajax()的data参数类型

2017年9月14日：补充JQuery.Ajax()的数据类型

本文以前提到的三种类型，这三种参数本质上都是变成了类似“uname=alice&mobileIpt=110&birthday=1983-05-12“”这样的字符串。

除了这三种类型，还可以是：

4、JSON字符串，形如

{"name": "uname", "age": 18}

注意，这个地方不是json对象，是json字符串，字符串。这样，在后台就可以直接注入到对象中。

当你需要向后台提交一组对象时时，json字符串的好处就体现出来了（对象数组）。

一般都是用post方法传递参数。

写法：

　　

5、FormData对象，它可以更灵活方便的发送表单数据，因为可以独立于表单使用。

最大的好处是可以通过Ajax上传文件。通过这种方式，可以非常方便的进行表单提交，也不需要下文提到的那种方法了，直接表单转换成FormData对象即可。

可以参考：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

6.其他类型，比如html, 比如XML，只要设置要contentType即可，类似JSON类型

—————————————————分割线—————————————————————————————

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

<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提交。

以前我们是这样实现的：

这没有什么错，就是获取表单元素的值实在是太麻烦....这里只有三项，很多项的时候就废了....

直到有一天，我发现了jquery的serializeArray方法（现在请使用FormData）

序列化表格元素 (类似 '.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"这样的就可以了。

分类: Java学习

好文要顶 关注我 收藏该文








尼玛范爷

关注 - 65

粉丝 - 73

+加关注

15

0

« 上一篇：通过拖动表格行进行行排序

» 下一篇：windows下修改memcached服务的端口号

posted @ 2014-08-12 23:40 尼玛范爷 阅读(296515)
评论(27) 编辑 收藏

评论

#1楼 2014-08-13
00:45 | 轴轴

非常感谢,正是我想要的功能.估计还会有其它类似的解决方案.
支持(0)反对(0)

#2楼 2014-08-13
08:48 | Gamain

mark一下，谢谢分享。
支持(0)反对(0)

#3楼[楼主] 2014-08-13
09:09 | 尼玛范爷

@ Gamain

@轴轴

感谢支持
支持(0)反对(0)

#4楼 2014-08-13
09:12 | 清海扬波

针对单选复选得到的值是怎么样的呢
支持(0)反对(0)

#5楼 2014-08-13
09:18 | 写CODE没女朋友

mark 一下
支持(0)反对(0)

#6楼 2014-08-13
09:37 | mrbenlearnjs

mark，问下楼主见过js中这种写法没,i=len>>>0,三个大于号，不知有何用
支持(1)反对(0)

#7楼[楼主] 2014-08-13
10:14 | 尼玛范爷

@ mrbenlearnjs

javascript中还有很多这样的运算符，你可以参考下javascritp手册
支持(0)反对(0)

#8楼[楼主] 2014-08-13
10:43 | 尼玛范爷

@ 清海扬波

表单：

通过serialize()方法获取到的数据是：

需要注意的是,如果checkbox或者radio没有选中，取得的数据中是没有这一项的。
支持(0)反对(0)

#9楼 2014-08-13
13:25 | wenbolwm

学习了，如果标签是禁用的话是取不到值的，有这样一个麻烦
支持(0)反对(0)

#10楼[楼主] 2014-08-13
13:43 | 尼玛范爷

@ wenbolwm

disabled属性的本意就是不能提交，怎么可以说是麻烦呢？
支持(0)反对(0)

#11楼 2014-08-13
16:38 | 吉喆吉

正好using $.ajax(),文章和评论都学到了很多,怒赞
支持(0)反对(0)

#12楼[楼主] 2014-08-13
16:47 | 尼玛范爷

@ 吉喆吉

谢谢

很高兴能给你带来帮助
支持(0)反对(0)

#13楼 2014-08-13
20:48 | wenbolwm

@ 范海涛

引用
@wenbolwmdisabled属性的本意就是不能提交，怎么可以说是麻烦呢？

有时下拉框禁止用户选择，但值又要被提交到后台，有什么好的提交方法么？谢谢
支持(0)反对(0)

#14楼[楼主] 2014-08-14
16:52 | 尼玛范爷

@ wenbolwm

我估计你的表单里的这个select应该是可以控制的，即，可能在触发了某些条件之后，该select可以解除禁用。

这样的话，我建议你动态的创建一个隐藏的<input type='hidden'>元素,其值为select的值。如果select解除禁用了，在删除该隐藏的input好了。
支持(0)反对(0)

#15楼 2014-08-14
22:58 | wenbolwm

@ 范海涛

谢谢
支持(0)反对(0)

#16楼 2014-08-14
23:43 | Tinkerc

Mark一下
支持(0)反对(0)

#17楼 2015-09-06
09:40 | pjcn

分析的真好，帮我解决了一个大问题
支持(0)反对(0)

#18楼[楼主] 2015-09-07
01:33 | 尼玛范爷

@ pjcn

哈哈哈，是嘛，那太好了
支持(0)反对(0)

#19楼 2015-10-20
11:29 | 午夜钟魂

赞，正在研究。这个data到底应该是什么类型的。受教了
支持(0)反对(0)

#20楼 2016-03-22
13:28 | 贾雨阳

1.var taskData = $("#addtaskForm").serializeArray();

2.var taskData = $("#addtaskForm").serialize();

$.ajax({

type:"post",

async:false,

data:taskData,

url:"page/taskAction_addTask.action",

error:function(){

alert("网络异常");

},

/* function(XMLHttpRequest, textStatus, errorThrown) {

alert(XMLHttpRequest.status);

alert(XMLHttpRequest.readyState);

alert(textStatus);

} ,*/

success:function(msg){

alert(msg);

}

});

form内容序列化，使用第一种方式后台无法获取数据，但是使用第二种可以获取数据。请求一下
支持(0)反对(0)

#21楼[楼主] 2016-03-25
11:30 | 尼玛范爷

@ 贾雨阳

呵呵，真有意思，贴个http请求的信息吧
支持(0)反对(0)

#22楼 2016-06-01
11:20 | 桃花衣旧笑春风

mark 一下这种方法
支持(0)反对(0)

#23楼 2017-05-08
11:39 | 奋斗的码农、

学习了 谢谢
支持(0)反对(0)

#24楼 2017-08-30
10:01 | FancyAnnaYL

From Data显示[object Object]:是正常现象吗？返回数据是null
支持(0)反对(0)

#25楼 2017-09-14
11:33 | 飞翔的猪猪侠

mark 学习了
支持(0)反对(0)

#26楼 2017-11-09
20:08 | 莫棄

谢楼主分享，帮了我一个大忙！！！
支持(0)反对(0)

#27楼[楼主] 2017-11-10
14:16 | 尼玛范爷

@ 莫棄

很高兴能帮到你