天气案例

来源：互联网发布：古诗欣赏的软件编辑：程序博客网时间：2024/05/16 13:54

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><input type="button" value='去百度 获取天气预报'><table id='weather'></table></body></html><script type="text/javascript" src='../js/template-native.js'></script><script type="text/template" id='template'><%for(var i=0;i<weather_data.length;i++) {%><tr><td><%=weather_data[i].date%></td><td><img src="<%=weather_data[i].dayPictureUrl%>" alt=""></td><td><img src="<%=weather_data[i].nightPictureUrl%>" alt=""></td><td><%=weather_data[i].temperature%></td><td><%=weather_data[i].weather%></td><td><%=weather_data[i].wind%></td></tr><% } %></script><script type="text/javascript" src='../js/jquery.min.js'></script><script type="text/javascript">$("input").click(function () {$.ajax({url:"http://api.map.baidu.com/telematics/v3/weather?location=上海&output=json&ak=tq0Kt0NFYheTCj5mszast0drkIqqVTNn",dataType:'jsonP',success:function(data){// 读取对象var weatherResults = data.results[0];// 读取模板var str = template('template',weatherResults);console.log(str);// 添加到界面上$("#weather").append(str);}})})</script>

演示效果：

用到百度开发者工具：http://lbsyun.baidu.com/index.php?title=car/api/weather

阅读全文

0 0