[转]jsonp的三种跨域方式

最新推荐文章于 2024-05-16 22:24:47 发布

djk8888

最新推荐文章于 2024-05-16 22:24:47 发布

阅读量501

点赞数

分类专栏： JS代码 html jquery 文章标签： jsonp

html 同时被 3 个专栏收录

97 篇文章 1 订阅

订阅专栏

JS代码

76 篇文章 1 订阅

订阅专栏

jquery

44 篇文章 0 订阅

订阅专栏

1、通过jq的$.ajax()完成跨域，这是我比较喜欢的一种方式。

代码如下：

$.ajax({
　　type:'get',
　　async:true,
　　url:'地址',
　　dataType:'jsonp',   //这里一定要写
　　jsonp:'callback',
　　jsonCallback:'自定义的一个名字',
　　success:function(data){
　　　　console.log(data);
　　},
　　error:function(data){
　　　　console.log(‘错误’)
　　}
})

2、通过$.getJSON(又四个参数)

$.getJSON('http://api.douban.com/v2/movie/top250?callback=?',{
　　'start':6,
　　'count':10
　　},function(data){
　　console.log(data);
　　var len=data.subjects.length;
　　for(var i=0;i<len;i++){
　　$('<tr>'+
　　'<td>'+
　　'<img src="'+data.subjects[i].images.large+'" />'+
　　'</td>'+
　　'<td style="width:200px;text-align: center;">'+
　　'<span>'+data.subjects[i].directors[0].name+'</span>'+
　　'</td>'+
　　'<td style="width:200px;text-align: center;">'+
　　'<span>'+data.subjects[i].title+'</span>'+
　　'</td>'+
　　'</tr>').appendTo($('table'));
　　}
},'json')

3、js原生的方式：定义一个函数操作返回的json数据，将这个函数作为回调函数，动态创建一个script标签，标签的src是数据地址在后面添上 callback=回调函数，将标签添加到body中。

(function(){
  var url='http://api.douban.com/v2/movie/top250?start=6&count=10';
  window.demo=function(res){
   alert(JSON.stringify(res));
  };
  var jsonp=function(url,fn){
   var ele=document.createElement('script');
   ele.src=url+'?callback='+fn;
   document.body.appendChild(ele);
  };
  jsonp(url,'demo');
 })

JSONP——很简单：https://blog.csdn.net/djk8888/article/details/84790672
源码下载地址：https://download.csdn.net/download/djk8888/10827780
原文出处：https://www.cnblogs.com/gaidalou/p/5945106.html