最近在網(wǎng)站上看了很多顯示實(shí)時(shí)天氣預(yù)報(bào)的，挺實(shí)用而且用戶體驗(yàn)也不錯(cuò)。對(duì)用戶的幫助也比較大，用戶可以通過你的網(wǎng)站了解到實(shí)時(shí)的天氣信息。感覺比較有意思，于是自己鉆研了一下其中的實(shí)現(xiàn)方法。于是決定把代碼分享給大家，希望能對(duì)大家的前端事業(yè)有所貢獻(xiàn)。

原理其實(shí)很簡單。就是當(dāng)頁面加載進(jìn)來之后，請(qǐng)求php文件，返回一組json。這組json就是我們所需要的有關(guān)天氣的信息。我們只需要把返回來的json解析以后，放到相應(yīng)的位置即可。

JavaScript的代碼：

?

$(function () {$.ajax({//請(qǐng)求的地址url :　"weather.php",//請(qǐng)求成功后執(zhí)行的函數(shù)success : function (data) {//用eval()解析返回來的數(shù)據(jù)，將字符串轉(zhuǎn)成JSON格式var oD = eval('('+data+')');//用jquery-1.8.2獲取元素var $place = $(".place"),$temp = $(".temp"),$wind = $(".wind"),$windPower = $(".windPower");//將返回來的數(shù)據(jù)放到相應(yīng)的位置$place.html(oD["weatherinfo"]["city"]);$temp.html(oD["weatherinfo"]["temp"] + "°");$wind.html(oD["weatherinfo"]["WD"]);$windPower.html(oD["weatherinfo"]["WS"]);}});})

?

由于是從其他網(wǎng)站上面取數(shù)據(jù)，所以用了點(diǎn)php的小知識(shí)。PHP的思路是用file_get_contents()函數(shù)向指定的地址請(qǐng)求，返回來的數(shù)據(jù)再輸出到前臺(tái)。

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>，風(fēng)向：<span class="wind">風(fēng)向</span>，風(fēng)力：<span class="windPower">風(fēng)力</span> </div>

?

?

為了使頁面看得比較清楚，加了些樣式。

Css代碼：

?

.all span {font:bold 30px/50px "宋體";color:red;}

以上就是簡單的天氣預(yù)報(bào)效果，還有一些簡單的原理實(shí)現(xiàn)。希望能對(duì)大家的前端事業(yè)有一些小小的幫助。以上僅是個(gè)人理解，若有小問題，咱們可以隨時(shí)交流，互相學(xué)習(xí)嘛。

?

轉(zhuǎn)載于:https://www.cnblogs.com/james1207/p/3258002.html

總結(jié)

以上是生活随笔為你收集整理的天气预报的Ajax效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。