Jsonp 跨域 处理

什么是跨域:

1、域名不同

2、域名相同端口不同。

  解决js的跨域问题可以使用jsonp。

  Jsonp不是新技术,跨域的解决方案。使用js的特性绕过跨域请求。Js可以跨域加载js文件。 

Jsonp原理

利用js可以跨域加载js文件来实现跨域请求

Jsonp 前端代码:

$.ajax({
                 type: "get",
                 async:false,
                 url: "http://localhost:8199/query/queryCompanyTotalRank",
                 dataType: "jsonp",
                 jsonpCallback:"jsonpCallback",              
                 success: function(data){
                   var oUl = document.getElementById('companyReportData');
                        var html='';
                         for(var i = 0;i<data.length;i++){
                                 html+='<tr><td>'+data[i].companyTotalRank+'</td><td>'+data[i].companyName
                                 +'</td><td>'+data[i].companyReport+'</td><td>'+data[i].companyReportform+'</td><td>'
                                 +data[i].companyTotal+'</td></tr>'
                         }
                         oUl.innerHTML = html;
                 }
             }); 
   
   
});

Jsonp 后端代码: 

//编制单位总量
@RequestMapping(value = "/queryCompanyTotalRank")
public void queryCompanyTotalRank(HttpServletResponse resp){
    ArrayList<CompanyArchivesOne> list11 = new ArrayList<>();
    JSONArray listArray = JSONArray.fromObject(list11);
    String json = listArray.toString();
    String jsonp = "jsonpCallback(" + json + ")";
    try {
        PrintWriter pw = resp.getWriter();
        pw.print(jsonp);
    } catch (Exception e) {
       e.printStackTrace();
    }

}
posted @ 2020-03-04 11:06  经济人  阅读(207)  评论(0编辑  收藏  举报