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

╰半夏微凉° 2022-06-04 02:49 277阅读 0赞

前端：

$.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][http_www.deardull.com_9090_getMySeat]“，  
    直接访问该数据地址竟然是这样的，不要方
    
    ![这里写图片描述][SouthEast]  
    如果访问时，会自动加上相应的callback，可以返回正确的数据；
 *  前端注意与后端沟通约定jsonp的值，通常默认都是用callback。
 *  后端根据jsonp参数名获取到参数后要与本来要返回的json数据按“callback(json)”的方式构造。
 *  如果要测试的话记得在跨域环境（两台机器）下进行。  
    参考链接：  
    [jQuery jsonp跨域请求][jQuery jsonp]  
    [Java+jquery+jsonp实现跨域][Java_jquery_jsonp]

[http_www.deardull.com_9090_getMySeat]: http://www.deardull.com:9090/getMySeat
[SouthEast]: /images/20220604/a2a2342e6c93416ca48badabbb7525c5.png
[jQuery jsonp]: https://www.cnblogs.com/chiangchou/p/jsonp.html
[Java_jquery_jsonp]: http://blog.csdn.net/u010741376/article/details/55101858