Ajax通过jsonp实现跨域访问,访问成功但走error不走success

2019独角兽企业重金招聘Python工程师标准>>>

刚开始json的格式:

 

[plain] view plain copy

1. {"dateli":[{"intro":"固定式","remarks":"割发代首","commId":"0006adc3-2b4e-4bbd-9e9e-45fa9b096a4d","price":"43.0","mdRelationId":"cd9e379c-9e98-49c0-b41e-93b932bf573a","commName":"后台"},{"intro":"固定式","remarks":"鬼地方","commId":"115460cb-9ae6-4057-bfcd-abc3b9426833","price":"2.0","mdRelationId":"cd9e379c-9e98-49c0-b41e-93b932bf573a","commName":"过任务"}]}  

 

 

前台代码：

[javascript] view plain copy

1. $.ajax({  
2.            url: "http://localhost/card/recharge",  
3.            type: "get",  
4.            dataType: "jsonp",  
5.            jsonp:'callback',  
6.            success: function (json) {  
7.                    var jsonlist = json.dateli.length;  
8.                    if (jsonlist > 0) {  
9.                        var html = '';  
10.                        for (var i = 0; i < jsonlist; i+=2) {  
11.                           alert(json.dateli[i].price);    
12.                        }  
13.                        $("#jiji").append(html);  
14.                    }  
15.            }  
16.        });  

 

 

后台代码:

[java] view plain copy

1. @RequestMapping(value = "/card/recharge")  
2.     public void cardRecharge(HttpServletRequest request,  
3.             HttpServletResponse response, String str) {  
4.         try {  
5.             this.logger.info("进入首页，查询参数str=" + str);  
6.             JSONObject json = JSONObject.fromObject(str);  
7.             JSONArray jsonListTmp = new JSONArray();  
8.             JSONObject tempJson = new JSONObject();  
9.             CommDomain commDomain = new CommDomain();  
10.             List<CommDomain> commList = this.serviceFactory.getCommServices().getCommDomain(commDomain);  
11.             for(CommDomain commDomainTemp : commList){  
12.                 tempJson.put("intro", commDomainTemp.getIntro());  
13.                 tempJson.put("remarks", commDomainTemp.getRemarks());  
14.                 /*tempJson.put("createTime", String.valueOf(commDomainTemp.getCreateTime()));*/  
15.                 tempJson.put("commId", commDomainTemp.getCommId());  
16.                 tempJson.put("price", String.valueOf(commDomainTemp.getPrice()));  
17.                 tempJson.put("mdRelationId", commDomainTemp.getMdRelationId());  
18.                 tempJson.put("commName", commDomainTemp.getCommName());  
19.                 jsonListTmp.add(tempJson);  
20.             }  
21.             JSONObject aapJson = new JSONObject();  
22.             aapJson.put("dateli", jsonListTmp);  
23.             this.logger.info("返回结果=" + aapJson .toString());  
24.             InputStream is = new ByteArrayInputStream(aapJson.toString().getBytes("UTF-8"));  
25.             // copy it to response's OutputStream  
26.             IOUtils.copy(is, response.getOutputStream());  
27.             response.flushBuffer();  
28.           
29.         } catch (Exception e) {  
30.             e.printStackTrace();  
31.         }  
32.         return;  
33.     }  

 

原因: 用jsonp跨域访问, 会注册callback, 生产一个随机的callback，正确的jsonp格式应该是 callback({"id" : "1","name" : "小王"}); 

       所以我们需要定义callback，前台指定回调函数jsonpCallback：successCallback，后台指定返回的json格式：String jj = "successCallback("+aapJson+")";

 

修改后的前台代码：

[javascript] view plain copy

1. $.ajax({  
2.           url: "http://localhost/card/recharge",  
3.           type: "get",  
4.           dataType: "jsonp",  
5.           jsonp:'callback',  
6.           jsonpCallback:"successCallback",  
7.           success: function (json) {  
8.                   var jsonlist = json.dateli.length;  
9.                   if (jsonlist > 0) {  
10.                       var html = '';  
11.                       for (var i = 0; i < jsonlist; i+=2) {  
12.         alert(json.dateli[i].price);        
13.                       }  
14.                       $("#jiji").append(html);  
15.                   }  
16.   
17.           }  
18.       });  

修改后的后台代码：

[java] view plain copy

1. @RequestMapping(value = "/card/recharge")  
2.     public void cardRecharge(HttpServletRequest request,  
3.             HttpServletResponse response, String str) {  
4.         try {  
5.             this.logger.info("进入首页，查询参数str=" + str);  
6.             JSONObject json = JSONObject.fromObject(str);  
7.             JSONArray jsonListTmp = new JSONArray();  
8.             JSONObject tempJson = new JSONObject();  
9.             CommDomain commDomain = new CommDomain();  
10.             List<CommDomain> commList = this.serviceFactory.getCommServices().getCommDomain(commDomain);  
11.             for(CommDomain commDomainTemp : commList){  
12.                 tempJson.put("intro", commDomainTemp.getIntro());  
13.                 tempJson.put("remarks", commDomainTemp.getRemarks());  
14.                 tempJson.put("commId", commDomainTemp.getCommId());  
15.                 tempJson.put("price", String.valueOf(commDomainTemp.getPrice()));  
16.                 tempJson.put("mdRelationId", commDomainTemp.getMdRelationId());  
17.                 tempJson.put("commName", commDomainTemp.getCommName());  
18.                 jsonListTmp.add(tempJson);  
19.             }  
20.             JSONObject aapJson = new JSONObject();  
21.             aapJson.put("dateli", jsonListTmp);  
22.             String jj = "successCallback("+aapJson+")";  
23.             this.logger.info("返回结果=" + jj.toString());  
24.             InputStream is = new ByteArrayInputStream(  
25.                     jj.toString().getBytes("UTF-8"));  
26.             // copy it to response's OutputStream  
27.             IOUtils.copy(is, response.getOutputStream());  
28.             response.flushBuffer();  
29.           
30.         } catch (Exception e) {  
31.             e.printStackTrace();  
32.         }  
33.         return;  
34.     }  

总结：用jsonp跨域访问， 一定需要注意callback，或者直接定义一个callback，例如这样：jsonpCallback:"successCallback",

 

 

           后台也需要注意， 返回的json值得格式，因为用jsonp，所以需要用这样的格式：successCallback({"id" : "1","name" : "小王"});

 

转载于:https://my.oschina.net/xiaominmin/blog/1821367