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

前端之家收集整理的这篇文章主要介绍了Ajax通过jsonp实现跨域访问,访问成功但走error不走success的的问题解决前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

转载:http://blog.csdn.net/qq_16322383/article/details/48025003

前提

最近工作中有个需求就是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);
            }
        }); 

后台代码

@Controller
public 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”}); 所以我改了后台返回数据的数据格式

@Controller
public class FromData {
    @RequestMapping("/data.do")
    public void getData1(HttpServletRequest req,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,这是楼主感觉有种想要流泪的感觉,天呀终于解决

不多说直接上成功的代码

@H_301_78@

成功前台代码

$.ajax({
            type:'get',jsonpCallback:"successCallback",success:function(data){
                alert("12222222222222222222222222");
                alert(data.name);
            },errorThrown){
                alert("33333333333333333");
                 alert(XMLHttpRequest.status);
                 alert(XMLHttpRequest.readyState);
                 alert(textStatus);
            }
        }); 


@H_301_78@ 成功后台代码 @H_301_78@
@Controller
public 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();
        }
    }
}
@H_301_78@ 成功前台结果显示

12222222222222222222222222
Hello world

至此:ajax通过Jsonp跨域问题成功解决,就是通过在前台指定回调函数jsonpCallback:successCallback,然后在后台rps.getWriter().print(“successCallback(“+json.toJSONString()+”)”);就成功解决问题

浏览器兼容

  1. 我只对Chrome浏览器进行了测试。
原文链接:https://www.f2er.com/ajax/161882.html

猜你在找的Ajax相关文章