做完之后发现其实也没什么,很简单的通过ajax和天气预报的API接口获取到数据,并将之在页面上显示。还是不熟练以及知识不牢靠,花了很久。总结如下:
1.先将静态页面写好。
2.因为这个api里是根据城市名获取的,所以在页面加上输入框,并且提交。
3.js部分,获取到输入框里的城市值,拼接在url中的参数内。
var city = document.getElementsByClassName("city")[0].value;
$.ajax({
url:'http://v.juhe.cn/weather/index?format=2&cityname='+city+'&key=b218a75493ba5e70c1253800c4baaf22',
4.ajax返回的数据中要注意是数组还是对象,开始没注意想当然了。
5.获取的时候报错,搜索是跨域问题,可以通过josnp来解决。并不是特别理解,查笔记时发现有知识点如下:
html标签的src属性是支持跨域的。
jsonp就是利用这个特性实现的跨域,用的是script标签。
在ajax中的操作是:
dataType:"jsonp",
jsonp:'callback',
虽然不是特别理解,但就不再报错了,成功返回数据。
6.接下来就是获取到数据在页面上显示了,append()和html()都可以。append()是在原有基础上添加。html()是改写了。
但在操作获取元素时遇到问题。开始是用
$('p:nth-child()').append();
来添加。总是在后面盒子部分操作错误。后来发现可以直接拼接这个DOM的字符串添加到固定的元素里,避免操作元素错误。像这样
$(".cry").append('<tr>'+'<td>'+'日期:'+future[1].date+'</td>'+'<td>'+'温度:'+future[1].temperature+'</td>'+'<td>'+'天气:'+future[1].weather+'</td>'+'</tr>');
7.参考之前学习视频案例时,可以用模板引擎,但具体操作时还是不太懂明白,而且要取的数据不再一个数组里,循环会很麻烦的样子。所以最后还是放弃了。
8.但最后还是有个小bug,就是如果再次输入会在原有基础上叠加获取到的数据,不知道如何在不刷新页面的情况下清空之前的数据。以后改正吧。