[JS]JSONP跨域访问百度地图云存储API

最近在写一个基于百度地图API实现的某旅游村落电子地图,在访问百度地图云存储平台上的数据表时出现了跨域问题,一开始我使用ajax获取script,代码如下:

    
function showDataz(data) {
        console.log("收到数据");
    }
  //查询百度lbs云中的数据表
  $.ajax({
     url: "http://api.map.baidu.com/geodata/v4/geotable/detail?ak=DTCvvn4nDAo0yFl3HpTw6O4bPSpk1btf&id=1000003116&jsoncallback=?",
     jsonpCallback:"showDataz",
      type:"GET",
      dataType:'script',
      jsonp:"showDataz",//重写回调函数名字
      cache:true,//缓存得到的数据
      success:function(data, textStatus, jqxhr) {
          $.each(data,function(index,content){

          })
          console.log(data); //data returned
          console.log(textStatus); //success
          console.log(jqxhr.status); //200
          console.log('Load was performed.');
      },
      error:function(XMLHttpRequest, textStatus, errorThrown){
          console.log("请求失败,status:"+XMLHttpRequest.status);
          console.log("readystate:"+XMLHttpRequest.readyState);
          console.log("responseText:"+XMLHttpRequest.responseText);
          console.log("错误信息:"+textStatus);
      }
  });


触发了成功请求的函数,但是data是undefined。在调试面板中也能看到返回的json:


如果把dataType改成jsonp,进入失败事件,返回如下。然而状态码200和4明明意味着请求成功。


最后通过同学的帮助,她找到利用雅虎提供的jsonp代理来解析请求的json,完美解决了问题。

$(function(){
    $.getJSON("http://query.yahooapis.com/v1/public/yql", {
    q: "select * from json where url=\"http://api.map.baidu.com/geodata/v4/geotable/detail?ak=DTCvvn4nDAo0yFl3HpTw6O4bPSpk1btf&id=1000003116\"",
    format: "json"
}, function(data) {
	 console.log(data);
	 console.log(data['query']['results']['json']['geotable']['name']);

});
});


十分感谢这个同学,也希望这篇博客能帮助到大家。在访问公网API不触及服务端代码时,这个方法十分有用。

参考:

扫描二维码关注公众号,回复: 4351145 查看本文章

JSONP 跨域访问代理API-yahooapis实现代码_jquery

猜你喜欢

转载自blog.csdn.net/truffle528/article/details/79296504