文档章节

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

xiaomin0322
 xiaomin0322
发布于 05/30 18:01
字数 557
阅读 93
收藏 1

刚开始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://blog.csdn.net/lazyyusky/article/details/48974335

共有 人打赏支持
xiaomin0322
粉丝 109
博文 3550
码字总数 165463
作品 0
上海
架构师
私信 提问
jquery的ajax和getJson跨域获取json数据

很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了。近日在进行开发时,因为要和第三方公司的一个项目进行数据的共享,因...

度外网络
2012/09/26
0
1
浅析Ajax跨域原理及JQuery中的实现分析

  AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新。但是出于安全的考虑,ajax不允许跨域通信。如果尝试从不同的域请求数据,就会出现错误。如果能控制数...

雲霏霏
2014/12/04
0
0
SSO单点登录、跨域重定向、跨域设置Cookie、京东单点登录实例分析

最近在研究SSO单点登录技术,其中有一种就是通过js的跨域设置cookie来达到单点登录目的的,下面就已京东商城为例来解释下跨域设置cookie的过程 涉及的关键知识点: 1、jQuery ajax跨域重定向...

bengozhong
2016/08/15
33
0
用jQuery与JSONP轻松解决跨域访问的问题

跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作,然后在浏览器端用AJAX获取本机服务器端“跨域访问...

烽穹寒渊
2015/07/26
0
0
JQuery + JsonP 解决跨域请求

什么是跨域 跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就...

刘引惟
2016/11/23
75
0

没有更多内容

加载失败,请刷新页面

加载更多

大数据教程(6.1)hadoop生态圈介绍及就业前景

1. HADOOP背景介绍 1.1、什么是HADOOP 1.HADOOP是apache旗下的一套开源软件平台 2.HADOOP提供的功能:利用服务器集群,根据用户的自定义业务逻辑,对海量数据进行分布式处理 3.HADOOP的核心组...

em_aaron
51分钟前
1
0
hadoop垃圾回收站

在生产生,hdfs回收站必须是开启的,一般设置为7天。 fs.trash.interval 为垃圾回收站保留时间,如果为0则禁用回收站功能。 fs.trash.checkpoint.interval 回收站检查点时间,一般设置为小于...

hnairdb
昨天
1
0
腾讯与Github的魔幻会面背后的故事…

10月22日,腾讯开源管理办公室有幸邀请到Github新晋CEO Nat Friedman,前来鹅厂参观交流。目前腾讯已经有近70个项目在Github上开源,共获得17w stars,世界排名11位。Github是腾讯开源的主阵...

腾讯开源
昨天
9
0
单例模式

单例模式(Singleton pattern)属于创建型设计模式。 保证一个类仅有一个实例,并提供一个访问它的全局访问点。 通常我们可以让一个全局变量使得一个对象被访问,但它不能防止你实例化多个对...

NinjaFrog
昨天
2
0
TypeScript基础入门之装饰器(三)

转载 TypeScript基础入门之装饰器(三) 继续上篇文章[TypeScript基础入门之装饰器(二)] 访问器装饰器 Accessor Decorator在访问器声明之前声明。 访问器装饰器应用于访问器的属性描述符,可用...

durban
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部