域名不同 或者 域名相同端口不同 都算是跨域请求,js出于对安全考虑不支持跨域请求。我们可以使用JSONP解决跨域问题。
1.jsonp只能使用get请求,解决同源问题,返回javascript代码,因为请求javascript文件是没有同源问题的。
2.当请求数据类型为jsonp时,会将callback=jsonpCallback(自定义函数名称)加在url上,http://127.0.0.1:9999/TestController/testJson?callback=jsonpCallback
3.前台javascript中定义jsonpCallback函数,此函数必须定义在window下,也就是全局的函数,否则找不到。
4.后台获取请求的callback参数值jsonpCallback,返回字符串"jsonpCallback(result)",result为返回结果。
5.请求返回的是script 代码,首先会调用jsonpCallback自定义函数,不管是否找到该函数,都会调用success函数。
方式一:
前台代码:
$.ajax({
url: 'http://127.0.0.1:9999/TestController/testJson',
type: "get",
async:false,
data: {},
dataType: 'jsonp', //这里为jsonp类型
jsonp: 'callback', // get请求携带的参数名称,
jsonpCallback: 'login', //自定义回调函数名称,可以不写Jqery有默认的函数名称
success: function(json){
alert(json);
var datastr = eval("("+json+")");
alert(datastr.name);
alert(datastr.age);
},
error : function() {
alert("异常!");
}
});
后台代码:
@RestController
@RequestMapping("TestController")
public class AccessController {
@GetMapping(value="testJson")
public String testJson(String callback){
String message = "{\"name\":\"张三\",\"age\":\"30\"}";
String json = JSON.toJSONString(message);
String result = callback + "(" + json + ");";
return result;
}
}
方式二
前台代码:
$.ajax({
url: 'http://127.0.0.1:9999/TestController/testJson',
type: "get",
async:false,
data: {},
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'login',
success: function(json){
alert(json.data);
alert(json.retCode);
if(!json.status){
alert(json.msg);
}
},
error : function() {
alert("异常!");
}
});
后台代码
包装返回值的类为 com.fasterxml.jackson.databind.util.JSONPObject;
@RestController
@RequestMapping("TestController")
public class AccessController {
@GetMapping(value="testJson")
public JSONPObject testJson(String callback){
//构造函数参数分别为 status, retCode, msg, data
ReturnData ReturnData = new ReturnData(true, 0, "请求成功", null);
JSONPObject jsonobj = new JSONPObject(callback, ReturnData);
return jsonobj;
}
}