10月10日 jsonp的三种跨域方式

Posted 2020-08-14

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‘);
 })