本帖最后由 dj1149 于 2017-8-4 14:34 编辑
快要升级了,最近有学json。所以就有了一个小的练习。因为要升级的原因，所有就赶紧来一波，以后有好的技术分享肯定会第一时间发来的~
先来一波图片
天气预报
介绍
首先 介绍下用的东西. HTML AJAX JavaScript jQuery
简单说明
没有什么技术含量，按老师的说法是ajax实现网页不刷新动态更新，jQuery 跨域访问 。因为ajax虽然可以实现不刷新页面的更新，但是它不支持跨域访问，jQuery正好可以跨域访问。所以搭配使用。
主要代码
function getResults(param){
var url="http://aider.meizu.com/app/weather/listWeather";
$.getJSON(url, param, function(e){
weatherResult=e;
if(weatherResult!=null){
//更新基本信息
basic();
//更新一天内小时天气
hourInDay();
//6天内的天气
daysIn6();
//空气质量
airQuality();
//指数
indexes();
//其他天气信息
weatherMore();
}else{
console.log("数据更新失败！"+$(this).val());
}
});
}
//更新基本天气信息
$("#cs").change(function(){
var param = {"cityIds":$(this).val()};
getResults(param);
});
其实在这里需要说明一下，$.getJSON(url, param, function(e)
这段里面的参数 url 是地址:<http://aider.meizu.com/app/weather/listWeather> param 是传入的json格式的数据，这里包含的就只是地区编号。function(e){}是一个回调。e是获得的返回数据，一些天气信息。可以自定义。
注意
在更新页面数据的时候，我之前用过一个很傻的办法，个人认为应该是习惯了java吧。这个办法会造成页面执行完毕后，数据没有更新。最后在老师那里得出的结果是：
>这个问题出现的原因和javascript执行有关，因为 $.getJSON 是一个网络请求，js在翻译的时候，不会管你这个$.getJSON方法有没有返回内容，他就会往下继续执行直到页面全部翻译结束，所以页面第一次没有数据。
我可能描述的没有老师说的清晰，但大概是这么个意思。我贴出我之前的错误代码：
//需要获取城市信息
function getResults(param){
$.getJSON(url, param, function(e){
weatherResult = e;
});
}
//更新基本天气信息
$("#cs").change(function(){
//console.log($(this).val());
var param = {"cityIds":$(this).val()};
getResults(param);
if(weatherResult!=null){
//更新基本信息
basic();
//更新一天内小时天气
hourInDay();
//6天内的天气
daysIn6();
//空气质量
//指数
//其他天气信息
}else{
console.log("数据更新失败！"+$(this).val());
}
});
还有一点忘了说，浏览器不支持跨域访问的需要安装扩展插件全都已经包含在了文件里面：nlfbmbojpeacfghkpbjhddihlkkiljbi.crx
最后
欢迎大神指正，刚学到js这边来，可能有错请多包涵~（论坛炸了啊，我访问ui全乱，各种加载不出2017年8月4日12:40:53）
希望大家多多评分~谢谢~
补上源文件：https://pan.baidu.com/s/1dFal78H
ui问题已经好了，刚才是用手机开的wifi。连上正常宽带就没问题了 | 
发表于 2017-8-4 12:01
发表于 2017-8-4 12:17
|
发表于 2017-8-4 12:41
