FCC中ajax部分的天气预报

做完之后发现其实也没什么，很简单的通过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，就是如果再次输入会在原有基础上叠加获取到的数据，不知道如何在不刷新页面的情况下清空之前的数据。以后改正吧。