ajax 跨域问题两种方式

最新推荐文章于 2024-12-25 07:26:23 发布

坑里水库

最新推荐文章于 2024-12-25 07:26:23 发布

阅读量359

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax 文章标签： ajax 跨域

本文链接：https://blog.youkuaiyun.com/qq_27409289/article/details/72654338

ajax 专栏收录该内容

1 篇文章

订阅专栏

本文介绍两种实现跨域请求的方法：一种使用原生的$.ajax()方法设置dataType为jsonp；另一种利用jQuery-jsonp插件简化调用过程。展示了前端与后端配合完成跨域请求的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种

             $.ajax({
        type: "POST",
        url : "http://localhost:8088/Shopping/user/ajaxCross.action",
        data:"null",
        async: false,
        dataType:"jsonp",
        error: function(request) {
          alert("test error");
        },
        success: function(data) {
        alert("success");
        alert(data);
         $.each(data,function(date){
                        alert(date);
                    });
        }
    });

注意：dataType 一定要为 jsonp 它的格式为（json格式）相当于用括号将json格式的数据包含。

_jqjsp({"address":"","birthday":{"date":14,"day":2,"hours":12,"minutes":12,"month":2,"nanos":0,"seconds":12,"time":1489464732000,"timezoneOffset":-480,"year":117},"dentityCode":"1","emaill":"","id":3,"name":"","order":2147483647,"picPath":"","remarks":"","sex":"???","status":1,"trueName":"????4"})

第二种通过 jquery-jsonp 插件来进行跨域

var url="http://localhost:8088/Shopping/user/ajaxCross.action"
    +"?callback=?&id=fdfd";
$.jsonp({
  "url": url,
  "success": function(data) {
        alert("success");
          alert(data);
           $.each(data,function(date){
                          alert(date);
                      });
  },
  "error": function(d,msg) {
    alert("Could not find user ");
  }
});

注意：callback=? 这部分一定要写 jquery 默认会添加如：

http://localhost:8088/Shopping/user/ajaxCross.action?callback=_jqjsp&_1495533338619=

后台代码都是一样的如：

    @ResponseBody
   @RequestMapping("/ajaxCross")
   public String ajaxCross(HttpServletRequest request){
       String callback = request.getParameter("callback");
       User user = userService.findUserById(3);

       JSONObject jsonStu = JSONObject.fromObject(user);
       return callback+"("+jsonStu+")";
   }