最近在FCC做任务的时候,任务中需要使用网上提供的接口完成通过Ajax获取到JSON数据,来动态更新页面上的天气情况。参考了下别人使用的天气预报接口,最后选择了和风天气。对其进行数据请求之后,成功获取了天气预报的数据返回。
使用方法:$.getJSON(url,function(data){ //data为返回的数据});
//url是接口地址(例如和风天气里面的接口地址是 https://free-api.heweather.com/v5/weather?city=yourcity&key=yourkey)
特别方便有没有?然后完成了对天气数据的获取,就到了对所在城市的位置获取,我选择了使用百度地图API来获取。百度地图提供的功能有点多,像我这种新手看起来,就感觉有点摸不清头脑。不过相同点是,你得先有个账号,然后获得API的密钥(key)。天气定位不需要太精确的位置,所以选用了Web服务API中的普通IP定位API。(有点想吐槽的一点是,百度地图的定位,有时候居然能偏差超级多,我在广东,居然有时候能定位到浙江。。。)
然后准备使用和前面获取天气预报数据一样的getJSON方法,然后就有问题出现了:浏览器报错了。
于是又屁颠屁颠的去找度娘了,慰问完度娘,才知道,这是和安全机制有关,不允许跨域调用。可以使用ajax()方法来执行。放一下菜鸟教程里面对ajax方法的描述(表示已经默默记住了):
放一下处理代码:
$.ajax({
url:"https://api.map.baidu.com/location/ip?ak=yourak", //接口地址,yourak是你的API key
type:"GET", //规定请求的类型(GET 或 POST)。
dataType:"JSONP", //预期的服务器响应的数据类型。
success:function(localData){
console.log(localData.content.address_detail.city); //成功输出请求的数据
}
});
忍不住,最后再吐槽一次获取的定位,我不在浙江。。。
最后的最后跟一张正常不抽风状态下的图: