Jquery跨域获取数据
2015-09-11 本文已影响449人
过桥
接入 PM2.5 数据
数据来源
http://pm25.in
接入方式
使用 Jquery ，直接请求数据，使用 jsonp 完成Ajax的跨域请求
代码示例
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PM2.5调用页面</title>
</head>
<body>
<div id="pm2_5">
</div>
<br />
注：返回数组中多一条记录 监测点为：null ？
<script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
//官网为 http://www.pm25.in/ 调用pm2.5 返回 json
//url中 city 为 城市名，token 为 申请的AppKey（官网API页面右侧申请）
var url = "http://pm25.in/api/querys/pm2_5.json?city=北京&token=7rMwJqMxrmuDRFsAxBqP";
$.ajax({
type: 'POST',
url: url,
dataType : "jsonp",// 将dataType屏蔽后会运行error方法
success: function(json){
//遍历网站返回的pm2.5数据
$("#pm2_5").append("<table>");
$("#pm2_5").append("<tr><td width='200px'>监测点</td><td width='200px'>PM2.5</td><td width='200px'>等级</td><td width='200px'>监测时间</td></tr>");
$.each(json, function (i, point){
$("#pm2_5").append("<tr><td>"+json[i].position_name+"</td><td>"+json[i].pm2_5+"</td><td>"+json[i].quality+"</td><td>"+json[i].time_point+"</td></tr>");
})
$("#pm2_5").append("</table>");
},
error:function(exception){
alert('调用失败！异常状态文本：'+exception.statusText);
}
});
})
</script>
</body>
</html>
补充
Ajax的跨域请求有两类解决方案 jquery.ajax jsonp 格式和 jquery.getScript 方式。
详细参考：http://julying.com/jQuery-1.6-api/#p=jQuery.ajax
