关键字：Ajax 模版引擎 jQuery
今天小编简单介绍一下如何调用车联网API接口，简单实现天气查询案例，有什么问题还望指正。
1.接口文档 --> http://developer.baidu.com/map/carapi-7.htm
首先我们需要注册申请开发者密钥ak，根据官网文档步骤进行申请，如下图
API.png
2.知识预备--模版引擎、ajax跨域访问
模版引擎可以参照官方文档： https://github.com/RookieDay/artTemplate （已fork）
3.简单实现
PS:
a).代码中ajax url -->"ak=..." 这里填自己申请上的ak
b).根据官网，提前了解接口调用接口参数、返回结果文档说明
c).下图是返回的数据
返回数据.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天气预报</title>
<style>
table {
width: 600px;
border-collapse: collapse;
}
td {
height: 40px;
text-align: center;
border: 1px solid #CCC;
}
</style>
</head>
<body>
<table>
</table>
<script src="./js/jquery.min.js"></script>
<script src="./js/template-native.js"></script>
<script>
$.ajax({
url: 'http://api.map.baidu.com/telematics/v3/weather?output=json&ak=申请的ak',
type: 'get',
data: {location: '北京'},
// 跨域请求
dataType: 'jsonp',
success: function (data) {
//data -- 成功获取返回的数据 data
//console.log(data);
var items = data.results[0]['weather_data'];
var data = {
items: items
}
var html = template('template', data);
$('table').append(html);
}
})
</script>
<script type="text/template" id="template">
<% for(var i=0; i<items.length; i++) { %>
<tr>
<td><%= items[i].date %></td>
<td>
<img src="<%= items[i].dayPictureUrl %>">
</td>
<td>
<img src="<%= items[i].nightPictureUrl %>">
</td>
<td><%= items[i].temperature %></td>
<td><%= items[i].weather %></td>
<td><%= items[i].wind %></td>
</tr>
<% } %>
</script>
</body>
</html>
网友评论