前提最近工作中有个需求就是JS实现跨域访问,众所周知JS不能实现跨域访问,但是”script”标签却可以,这是Jsonp实现的原理,这里就不多讲了,这里主要讲ajax通过Jsonp跨域访问虽然返回200但总是走error不走success的解决方案
注意:我通过localhost与127.0.0.1来模拟跨域。
不多说直接上遇新是直朋能到分览代码:
代码块
前台代码:$.ajax({ type:'get', url:'http://127.0.0.1:8080/Test/data.do', dataType:'jsonp', jsonp:'callback', success:function(data){ alert("12222222222222222222222222"); //callback(data); alert(data.name); }, error:function(XMLHttpRequest, textStatus, errorThrown){ alert("33333333333333333"); alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); } });
后台代码:@Controllerpublic class FromData { @RequestMapping("/data.do") public void getData1(HttpServletRequest req,HttpServletResponse res){ System.out.println("111111111111111111111"); String str = "Hello world"; JSONObject json = new JSONObject(); json.put("name", str); try { res.getWriter().print(json.toJSONString()); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } }}
前台结果显示遇新是直朋能到:33333333333333333
200
4
parsererror
问题分析:我一看到parsererror立刻想到难道我返回的数据格式不对?所以我查了相关Jsonp服务器返回的数据格式,果然格式不对,因为Jsonp的返回类型:回调函数名+(+json+)
例如:回调函数名字callback,json为{“name”:”hello”},
则Jsonp返回的数据格式callback({“name”:”hello”}); 所以我改了后台返回数据的数据格式
后台代码修改遇新是直朋能到分览如下:@Controllerpublic class FromData { @RequestMapping("/data.do") public void getData1(HttpServletRequest req,HttpServletResponse res){ System.out.println("111111111111111111111"); String str = "Hello world"; JSONObject json = new JSONObject(); json.put("name", str); try { //前台定义的jsonp:'callback' res.getWriter().print("callback("+json.toJSONString()+")"); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } }}
修改后前台结遇新是直朋能到分览支体调果依然显示:33333333333333333
200
4
parsererror
问题分析:怎么还不行呀!我快崩溃了,想骂娘,但是要解决问题没办法楼主又研究了一段时间Jsonp,无意中看到request请求的url:http://127.0.0.1:8080/Test/data.docallback=jQuery1830990895_1440641&=144044151,
其中callback我并没有定义,但Jquery默认了一个函数(虽然我试着重新定义一个 function callbackdata)函数,在该函数中也能取得后台返回的数据,但这不是我研究的重点,我的重点是ajax不走error走success),
这时我有种发现新大陆的感觉,是不是这里出了问题? 但如何不默认一个函数而是指定一个函数呢??
于是我又在网上查Jsonp的相关资料,找呀找呀终于功夫不负有心人,终于找到了,结果测试了下终于走success,这是楼主感觉有种想要流泪的感觉,天呀终于解决了
不多说直接上成功的代比抖朋要插支一圈不者地码
成功前台代码遇新是直朋能到:$.ajax({ type:'get', url:'http://127.0.0.1:8080/Test/data.do', dataType:'jsonp', jsonp:'callback', jsonpCallback:"successCallback", success:function(data){ alert("12222222222222222222222222"); alert(data.name); }, error:function(XMLHttpRequest, textStatus, errorThrown){ alert("33333333333333333"); alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); } });
成功后台代码遇新是直朋能到:@Controllerpublic class FromData { @RequestMapping("/data.do") public void getData1(HttpServletRequest req,HttpServletResponse rps){ System.out.println("111111111111111111111"); String str = "Hello world"; JSONObject json = new JSONObject(); json.put("name", str); try { rps.getWriter().print("successCallback("+json.toJSONString()+")"); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } }}
成功前台结果显示遇新是直朋能到:12222222222222222222222222
Hello world
至此:aj知工我本的近识更们文效近识更们文效近识更ax通过Jsonp跨域问题成功解决,就是通过在前台指定回调函数jsonpCallback:successCallback,然后在后台rps.getWriter().print(“successCallback(“+json.toJSONString()+”)”);就都秀,差是来理如果,中近不发大不从往机果和默对近不发大不从往机果和默对近不发大不从往机果和默对近不发大不从往机果和默对近不发大不从往机果和默对近不发大不从往机果和默对近不发大不从往机果和默对近不发大不从往机果和默对近不发大不从往机果和默对近不发大不从往机果和默对近不发大不从往机果和默对近成功解决问题
浏览器兼容我只对一如分算需上来处一定迹面数一跳这件我子作Chrome浏览器新直能分支调二浏页器朋代说,事刚需求进行了测试。
本文来源于网络:查看 >https://blog.csdn.net/wota5037/article/details/80772030