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

扩展ServiceBase类解决Ajax跨域问题

  • 2017年12月14日 17:13
  • 830KB
  • 下载

解决ajax跨域问题

  • 2013年10月05日 11:01
  • 37KB
  • 下载

看小白如何解决ajax跨域问题

由于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决ajax的跨域问题。本篇将讲述一个小白从遇到跨域不知道...

ajax跨域问题!

  • 2014年08月27日 09:48
  • 1KB
  • 下载

ajax跨域问题的解决办法

  • 2011年07月19日 16:42
  • 38KB
  • 下载

vue2 前后端分离项目ajax跨域session问题解决

最近学习使用vuejs前后端分离,重构一个已有的后台管理系统,遇到了下面这个问题: 实现跨域请求时,每次ajax请求都是新的session,导致无法获取登录信息,所有的请求都被判定为未登陆。 ...

解决ajax跨域问题

  • 2016年12月28日 16:59
  • 11KB
  • 下载

解决ajax跨域问题

  • 2015年12月02日 23:19
  • 4KB
  • 下载

Ajax异步请求RESTFUL API之跨域问题解决方案

Ajax之异步请求 Access control allow origin 同源策略 CORS(Cross-Origin Resource Sharing) *HTTP之简单请求和复杂请求...

原生JS仿jquery封装的ajax方法 支持JOSNP跨域问题

序平时工作中用到ajax比较多,一般都是直接用jquery里的ajax来操作的,说实话jquery真的很好用,给我工作带来的很大的便利,但我们要学会知其然知其所以然,所以我决定自己封装一个ajax方法...
  • kwinH
  • kwinH
  • 2016年11月14日 10:29
  • 515
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ajax跨域问题
举报原因:
原因补充:

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