<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
我在我的页面想去访问百度提供的一个服务器，
百度给我们提供了很多的接口，比如说ip 地址查询，比如说
天气预报，比如说火车票，机票查询.
</title>
<script src="template-native.js"></script>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</head>
<body>
<script type="text/template" id="templateId">
<%for(var i=0;i<list.length;i++){%>
<tr>
<td><%=list[i].date%></td>
<td><img src="<%=list[i].dayPictureUrl%>"></td>
<td><img src="<%=list[i].nightPictureUrl%>"></td>
<td><%=list[i].temperature%></td>
<td><%=list[i].weather%></td>
<td><%=list[i].wind%></td>
</tr>
<%}%>
</script>
<input type="text" id="cityName" placeholder="请输入城市" > <input type="button" value="查询天气">
<script>
$("input[type=button]").on("click",function(){
var cityName=document.querySelector("#cityName").value;
//跨域是浏览器的安全策略.
//我现在是jQuery ，jQuery 怎么去解决
//jQuery 解决的方式.
$.ajax({
url:"http://api.map.baidu.com/telematics/v3/weather",
type:"get",
data:{
location:cityName,
output:'json',
ak:'6tYzTvGZSOpYB5Oc2YGGOKt8'
},
/*预期服务器端返回的数据类型，假设我现在跨域了，我就改成jsonp 就可以了 */
dataType:"jsonp",
success:function(data){
console.log(data)
//百度那边的 数据已经回来，我现在要解析这个数据.
var weatherData=data.results[0].weather_data;
var obj={
list:weatherData
}
var html=template("templateId",obj);
document.querySelector("table").innerHTML=html;
}
})
})
</script>
<table>
</table>
</body>
</html>