最近在写一个基于百度地图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 查看本文章