天气预报的Ajax效果
发布时间:2020-12-16 00:56:04 所属栏目:百科 来源:网络整理
导读:最近在网站上看了很多显示实时天气预报的,挺实用而且用户体验也不错。对用户的帮助也比较大,用户可以通过你的网站了解到实时的天气信息。感觉比较有意思,于是自己钻研了一下其中的实现方法。于是决定把代码分享给大家,希望能对大家的前端事业有所贡献。
最近在网站上看了很多显示实时天气预报的,挺实用而且用户体验也不错。对用户的帮助也比较大,用户可以通过你的网站了解到实时的天气信息。感觉比较有意思,于是自己钻研了一下其中的实现方法。于是决定把代码分享给大家,希望能对大家的前端事业有所贡献。 原理其实很简单。就是当页面加载进来之后,请求php文件,返回一组json。这组json就是我们所需要的有关天气的信息。我们只需要把返回来的json解析以后,放到相应的位置即可。 JavaScript的代码: $(function () { $.ajax({ //请求的地址 url : "weather.php",//请求成功后执行的函数 success : function (data) { //用eval()解析返回来的数据,将字符串转成JSON格式 var oD = eval('('+data+')'); //用jquery-1.8.2获取元素 var $place = $(".place"),$temp = $(".temp"),$wind = $(".wind"),$windPower = $(".windPower"); //将返回来的数据放到相应的位置 $place.html(oD["weatherinfo"]["city"]); $temp.html(oD["weatherinfo"]["temp"] + "°"); $wind.html(oD["weatherinfo"]["WD"]); $windPower.html(oD["weatherinfo"]["WS"]); } }); }) 由于是从其他网站上面取数据,所以用了点php的小知识。PHP的思路是用file_get_contents()函数向指定的地址请求,返回来的数据再输出到前台。 PHP代码: <?php $weather = file_get_contents("http://www.weather.com.cn/data/sk/101010100.html"); echo $weather; ?> HTML代码: <div class="all"> 这里是:<span class="place">城市</span>,气温是<span class="temp">气温</span>, 风向:<span class="wind">风向</span>, 风力:<span class="windPower">风力</span> </div> 为了使页面看得比较清楚,加了些样式。 Css代码: .all span {font:bold 30px/50px "宋体";color:red;}以上就是简单的天气预报效果,还有一些简单的原理实现。希望能对大家的前端事业有一些小小的帮助。以上仅是个人理解,若有小问题,咱们可以随时交流,互相学习嘛。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |