jQuery中的Ajax及其与Java后台的数据交换

jQuery中的Ajax及其与Java后台的数据交换

一、ajax相关函数简析

1.1、ajax所有函数的默认全局设置

//默认设置
ajaxSettings: {
url: ajaxLocation,
type: "GET",       //请求默认方式为get
isLocal: rlocalProtocol.test( ajaxLocParts[ 1 ] ),
global: true,      //默认触发全局Ajax事件
async: true,       //默认异步
processData: true, //默认会将data数据转成查询字符串
cache: true,       //默认读取缓存
contentType: "application/x-www-form-urlencoded; charset=UTF-8"}

//默认设置还可通过如下函数修改
$.ajaxSetup({
async : false
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
说明：在processData选项为true的情况下，只有data选项的数据是PlainObject而不是String时，才会转成查询字符串。
如果指定了cache为false表示不能进行数据缓存，那么会在url后面添加一个当前时间。

1.2、jQuery.get()和jQuery.post()函数源码

jQuery.ajax({
url: url,
type: method,   //"get"或"post"
dataType: type, //可选
data: data,     //String或Object
success: callback
});

1
2
3
4
5
6
7
由此可得：jQuery.get()和jQuery.post()只有在数据成功返回后才会调用回调函数。
若不重新设置ajax的全局设置，这两个函数只能以异步方式运行。
由于全局设置中processData选项为true，而jQuery.get()和jQuery.post()中没有对该选项重新设置，故这两个函数中的data选项的数据若不是String的话，必会经过jQuery.param()转成查询字符串。

1.3、jQuery.getJSON()和jQuery.getScript()函数源码

getJSON: function( url, data, callback ) {
return jQuery.get( url, data, callback, "json" );
}

getScript: function( url, callback ) {
return jQuery.get( url, undefined, callback, "script" );
}

1
2
3
4
5
6
7
这两个函数本质上就是指定了dataType选项的jQuery.get()。

二、ajax函数调用示例

2.1 使用jQuery.get()或jQuery.post()

var json = {};
json.id = "40022";
json.name = "WooTer";

$.get("/MedRecord/emr_main.do",json,function(data,status){
//TODO
});

1
2
3
4
5
6
7
该方式的局限性：只有在数据成功返回后才会调用回调函数，若数据返回失败则没有任何提示信息。
若不重新设置ajax的全局设置，就只能以异步方式运行，这在某些需要同步的场景下使用就不便了。
若不重新设置ajax的全局设置，在传递的变量json不变的情况下，会从浏览器缓存读取要返回的数据，这在某种程度上就无法获取数据库中最新的数据。

2.2 使用jQuery.ajax()

var json = {};
json.id = "40022";
json.name = "WooTer";

$.ajax({
url: "/MedRecord/emr/loadModelDirdata.do",
data: json,
type: 'post',      //请求方式
async: false,      //是否异步
cache: false,      //是否使用缓存
dataType: "json",  //返回数据的格式
error: function () {
alert('加载数据失败！');
},
success: function(data){
//TODO
}
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
该方式的灵活性：可添加调用失败时的提示信息。
可自由设置同步还是异步。
可设置在任何情况下都不从浏览器缓存读取数据。

三、不同设置类型的ajax函数向Java后端传递数据

3.1、前端以查询字符串形式传送数据

（1）查询字符串的每个键只对应一个值

var json = {};
json.id = "40022";
json.name = "WooTer";

$.ajax({
url: "/MedRecord/example1.do",
data: json,
//...
});

1
2
3
4
5
6
7
8
9

/*方式一：
*后端通过 @RequestParam(value="xxx") String xxx 分别获取对应的键值对
*/
@RequestMapping(value="/example1", method=RequestMethod.GET)
public @ResponseBody String emrSubmit(
@RequestParam(value="id") String id，
@RequestParam(value="name") String name
){
//...
}

/*方式二：
*后端通过 @RequestParam Map<String,Object> param 一次性获取全
*部的键值对
*/
@RequestMapping(value="/example1", method=RequestMethod.GET)
public @ResponseBody String emrSubmit(
@RequestParam Map<String,Object> param
){
//提取前端传来的具体参数
String id = (String)params.get("id");
String name = (String)params.get("name ");
//...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
（2）查询字符串的每个键对应多个值（键值为简单数组）

var json = {};
json.id = ["40022","40021","40022"];
json.name = ["WooTer","WooTing","WooFing"];

$.ajax({
url: "/MedRecord/example1.do",
data: json,
//...
});

1
2
3
4
5
6
7
8
9

/*方式一：
*后端通过 @RequestParam(value="xxx[]") List<String> xxx 获取
*"一键多值"对
*/
@RequestMapping(value="/example1", method=RequestMethod.GET)
public @ResponseBody String emrSubmit(
@RequestParam(value="id[]") List<String> id，
@RequestParam(value="name[]") List<String> name
){
//...
}

1
2
3
4
5
6
7
8
9
10
11
3.2、前端以json字符串形式传送数据

var json = {};
json.id = "40022";
json.name = "WooTer";

$.ajax({
url: "/MedRecord/example1.do",
data: JSON.stringify(json),
contentType:'application/json;charset=UTF-8',
//...
});

1
2
3
4
5
6
7
8
9
10

/*方式一：(该方式在跨域访问下使用有点问题)
*后端通过 @RequestBody 直接将json字符串绑定到对应的model上
*/
@RequestMapping(value="/example1",method=RequestMethod.GET,
consumes = "application/json")
public @ResponseBody String emrSubmit(@RequestBody User user) {
//...
}

class User {
private String id;
private String name;
//...(Getters and Setters)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

四、ajax函数接收Java后端返回的不同类型的数据

4.1、Java后端返回Object类型

@RequestMapping(value="/example1", method=RequestMethod.GET)
public @ResponseBody List<EmrMain> emrSubmit(){
//...
List<EmrMain> emrMain = new ArrayList<EmrMain>();
return emrMain;
}

1
2
3
4
5
6

/*方式一：
*设置dataType："json",接收到的即是json对象
*/
$.ajax({
//...
dataType:"json",
success : function(data) {
//此处的data就是一个json对象，可以直接当作对象使用
}
});

/*方式二：
*不设置dataType,接收到的即是json字符串
*/
$.ajax({
//...
success : function(data) {
//此处的data是json字符串
}
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

4.2、Java后端返回String类型

@RequestMapping(value="/example1", method=RequestMethod.GET)
public @ResponseBody String emrSubmit(){
//...
List<EmrMain> emrMain = new ArrayList<EmrMain>();
return JSON.toJSONString(emrMain);
}

1
2
3
4
5
6

/*方式一：
*设置dataType："json",接收到的即是json字符串
*/
$.ajax({
//...
dataType:"json",
success : function(data) {
//此处的data是json字符串
}
});

/*方式二：
*不设置dataType,接收到的是外面再套一层引号的json字符串
*/
$.ajax({
//...
success : function(data) {
//此处的data是外面再套一层引号的json字符串
//若想通过data得到json对象，就需要调用两次JSON.parse(),如：JSON.parse(JSON.parse(data));
}
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
由此可得：Java后台在返回数据时，都会将要返回的数据转成字符串。若数据为Objcet类型，则将其转成字符串；若数据本身就为String类型，也会将其转成字符串（此时会在外层再套一对引号）。

ajax在接收数据时，若不设置dataType选项，则直接将后台传来的字符串赋给data变量；若设置dataType：”json”，则会对后台传来的字符串使用一次JSON.parse()函数。
转载：http://blog.csdn.net/wutao1155/article/details/53048114