ajax跨域问题

原创 2016年08月30日 20:50:34

一、首先来看看在页面中如何使用jQuery的ajax解决跨域问题的简单版:

$(document).ready(function(){
   var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"
       +"?id=1<span style="color:#ff6666;">&callback</span>=?';
   $.ajax({
     url:url,
     dataType:'<span style="color:#ff0000;">jsonp</span>',
     processData: false, 
     type:'get',
     success:function(data){
       alert(data.name);
     },
     error:function(XMLHttpRequest, textStatus, errorThrown) {
       alert(XMLHttpRequest.status);
       alert(XMLHttpRequest.readyState);
       alert(textStatus);
     }});
   });

这样写是完全没有问题的,起先error的处理函数中仅仅是alert(“error”),为了进一步弄清楚是什么原因造成了错误,故将处理函数变 为上面的实现方式。最后一行alert使用为;parsererror。百思不得其解,继续google,最终还是在万能的stackoverflow找 到了答案,链接在这里。原因是jsonp的格式与json格式有着细微的差别,所以在server端的代码上稍稍有所不同。

json格式:
{
    "message":"获取成功",
    "state":"1",
    "result":{"name":"工作组1","id":1,"description":"11"}
}
jsonp格式:
callback({
    "message":"获取成功",
    "state":"1",
    "result":{"name":"工作组1","id":1,"description":"11"}
})

看出来区别了吧,在url中callback传到后台的参数是神马callback就是神马,jsonp比json外面有多了一层,callback()。这样就知道怎么处理它了。于是修改后台代码。

后台java代码最终如下:

@RequestMapping(value = "/getGroupById")
  public String getGroupById(@RequestParam("id") Long id,
      HttpServletRequest request, HttpServletResponse response)
      throws IOException {
    String callback = request.getParameter("callback");
    ReturnObject result = null;
    Group group = null;
    try {
      group = groupService.getGroupById(id);
      result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS);
    } catch (BusinessException e) {
      e.printStackTrace();
      result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED);
    }
    String json = JsonConverter.bean2Json(result);
    response.setContentType("text/html");
    response.setCharacterEncoding("utf-8");
    PrintWriter out = response.getWriter();
    out.print(callback + "(" + json + ")");
    return null;
  }

注意这里需要先将查询结果转换我json格式,然后用参数callback在json外面再套一层,就变成了jsonp。指定数据类型为jsonp的ajax就可以做进一步处理了。

二、第二种方式

使用插件:注意这里需要先将查询结果转换我json格式,然后用参数callback在json外面再套一层,就变成了jsonp。指定数据类型为jsonp的ajax就可以做进一步处理了。
无意中发现了一个专门用来解决跨域问题的jQuery插件-jquery-jsonp
注意这里需要先将查询结果转换我json格式,然后用参数callback在json外面再套一层,就变成了jsonp。指定数据类型为jsonp的ajax就可以做进一步处理了。
来看一下如何使用jquery-jsonp插件解决跨域问题吧。
var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"
    +"?id=1&callback=?";
$.jsonp({
  "url": url,
  "success": function(data) {
    $("#current-group").text("当前工作组:"+data.result.name);
  },
  "error": function(d,msg) {
    alert("Could not find user "+msg);
  }
});



注意这里需要先将查询结果转换我json格式,然后用参数callback在json外面再套一层,就变成了jsonp。指定数据类型为jsonp的ajax就可以做进一步处理了。
版权声明:本文为博主原创文章,未经博主允许不得转载。学习交流QQ群: 173124648

相关文章推荐

解决ajax跨域问题

  • 2013-10-05 11:01
  • 36KB
  • 下载

ajax跨域问题!

最新版chrome谷歌浏览器Ajax跨域调试问题

Ajax本身是不支持跨域的,而我们在开发工作中,可能会遇到本地开发环境未配置相关代码,需要到其他服务器上获取数据的情况,尤其在用html5开发app的过程中,前后台完全分离,使用Ajax进行数据交互,...

flash解决ajax跨域问题

  • 2012-10-22 14:13
  • 15KB
  • 下载

ajax跨域问题的解决办法

  • 2011-07-19 16:42
  • 38KB
  • 下载

ajax请求总是不成功?浏览器的同源策略和跨域问题详解

摘要: XMLHttpRequest cannot load http://oldwang.com/isdad. No 'Access-Control-Allow-Origin' header is ...

解决ajax跨域问题

  • 2016-12-28 16:59
  • 11KB
  • 下载

解决ajax跨域问题

ajax跨域问题总结

在实际项目开发中经常会遇到ajax跨域问题,实习第一次碰到的时候着实懵逼了一把,自己的ajax写的没问题啊,问了同事才知道是跨域了。跨域跨域顾名思义就是跨域名,比如我的开发环境是测试环境(a.####...

如何解决Ajax跨域问题

Ajax跨域问题--信息总结归纳 如何解决ajax跨域问题(转) 由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)