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

原理其實很簡單。就是當頁面加載進來之后，請求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;}

以上就是簡單的天氣預報效果，還有一些簡單的原理實現。希望能對大家的前端事業有一些小小的幫助。以上僅是個人理解，若有小問題，咱們可以隨時交流，互相學習嘛。

?

轉載于:https://www.cnblogs.com/james1207/p/3258002.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。