jQuery+Ajax+jsonp+java实现跨域访问

时间:2021-09-03 10:16:29

前端:

 $.ajax({
type:"GET",
url:"http://www.deardull.com:9090/getMySeat", //访问的链接
dataType:"jsonp", //数据格式设置为jsonp
jsonp:"callback", //Jquery生成验证参数的名称
success:function(data){ //成功的回调函数
alert(data);
},
error: function (e) {
alert("error");
}
});

后端:

 @ResponseBody
@RequestMapping("/getMySeat")
public String getMySeatSuccess(@RequestParam("callback") String callback){
Gson gson=new Gson();
Map<String,String> map=new HashMap<>();
map.put("seat","1_2_06_12");
logger.info(callback);
return callback+"("+gson.toJson(map)+")";
}

注意:

  • 使用jsonp时,跨域请求只能是get请求,不能为post,即“type:GET”;
  • url不带类似“?callback=’aaa’”的字符串,如例子中的 url:”http://www.deardull.com:9090/getMySeat“,
    直接访问该数据地址竟然是这样的,不要方

    jQuery+Ajax+jsonp+java实现跨域访问
    如果访问时,会自动加上相应的callback,可以返回正确的数据;

  • 前端注意与后端沟通约定jsonp的值,通常默认都是用callback。
  • 后端根据jsonp参数名获取到参数后要与本来要返回的json数据按“callback(json)”的方式构造。
  • 如果要测试的话记得在跨域环境(两台机器)下进行。
    参考链接:
    jQuery jsonp跨域请求
    Java+jquery+jsonp实现跨域