来自https://blog.csdn.net/wutao1155/article/details/53048114?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control
一、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()函数。
https://blog.csdn.net/AYF275440195/article/details/94737128