php ajax天气预报,天气预报的Ajax效果

最近在网站上看了很多显示实时天气预报的，挺实用而且用户体验也不错。对用户的帮助也比较大，用户可以通过你的网站了解到实时的天气信息。感觉比较有意思，于是自己钻研了一下其中的实现方法。于是决定把代码分享给大家，希望能对大家的前端事业有所贡献。

原理其实很简单。就是当页面加载进来之后，请求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()函数向指定的地址请求，返回来的数据再输出到前台。

$weather = file_get_contents("http://www.weather.com.cn/data/sk/101010100.html");

echo $weather;

?>

这里是：城市,气温是气温，

风向：风向，

风力：风力

为了使页面看得比较清楚，加了些样式。

Css代码：

.all span {font:bold 30px/50px "宋体";color:red;} 　　以上就是简单的天气预报效果，还有一些简单的原理实现。希望能对大家的前端事业有一些小小的帮助。以上仅是个人理解，若有小问题，咱们可以随时交流，互相学习嘛。

总结

以上是编程之家为你收集整理的天气预报的Ajax效果全部内容，希望文章能够帮你解决天气预报的Ajax效果所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。