快捷導(dǎo)航

PHP+AJAX無刷新實現(xiàn)返回天氣預(yù)報數(shù)據(jù)

更新時間：2013年07月31日 17:54:37 作者：

天氣數(shù)據(jù)是通過采集中國氣象網(wǎng)站的。本來中國天氣網(wǎng)站也給出了數(shù)據(jù)的API接口，接下來為大家介紹下用php來寫一個天氣預(yù)報的模塊，感興趣的朋友可以參考下

用php來寫一個天氣預(yù)報的模塊

天氣數(shù)據(jù)是通過采集中國氣象網(wǎng)站的。本來中國天氣網(wǎng)站也給出了數(shù)據(jù)的API接口。以下是API的地址。返回的數(shù)據(jù)格式為json格式。

1. http://www.weather.com.cn/data/sk/101010100.html
2. http://www.weather.com.cn/data/cityinfo/101010100.html
3. http://m.weather.com.cn/data/101010100.html

URL中的數(shù)字”101010100“是城市代碼。所以可以先列出每個城市的城市代碼，然后php程序接收到了城市代碼，再去組裝URL，在通過URL來顯示該城市的實時天氣。

index.php

復(fù)制代碼代碼如下:

 
<?php 
header("Content-Type:text/html;charset=utf-8"); 
?> 
<html> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
<head> 
<title>weather forecast</title> 
<script type="text/javascript" src="ajax.js"></script> 
<script type="text/javascript"> 
function $(id){ 
return document.getElementById(id); 
} 
function getCityId(){ 
var http_request=createAjax(); 
var url="weatherforecast.php" 
var data="cityid="+$("cityId").value; 
http_request.onreadystatechange=getWetherInfo; 
http_request.open("post",url,true); 
http_request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
http_request.send(data); 
function getWetherInfo(){ 
if(http_request.readyState==4 && http_request.status==200){ 
var info=http_request.responseText; 
$("weatherinfo").innerHTML=info; 
} 
} 
} 
</script> 
</head> 
<body> 
<select name="cityId" onchange="getCityId();" id="cityId"> 
<option>--請選擇城市--</option> 
<option value="101010100">北京</option> 
<option value="101020100">上海</option> 
<option value="101030100">天津</option> 
<option value="101040100">重慶</option> 
<option value="101280101">廣州</option> 
</select> 
<span id="weatherinfo"></span> 
</body> 
</html> 

weatherforecast.php

復(fù)制代碼代碼如下:

 
<?php 
header("Content-Type:text/html;charset=utf-8"); 
header("Cache-Control:no-cache"); 
if (isset($_POST['cityid'])){ 
$cityid=$_POST['cityid']; 
$url=$url="http://www.weather.com.cn/data/sk/".$cityid.".html"; 
}else { 
$url="http://www.weather.com.cn/data/sk/101010100.html"; 
} 
$weatherInfo_json=file_get_contents($url); 
$weatherInfo=json_decode($weatherInfo_json,true); 
$cityName=$weatherInfo['weatherinfo']['city']; 
$cityTemp=$weatherInfo['weatherinfo']['temp']; 
$cityWd=$weatherInfo['weatherinfo']['WD']; 
$cityWs=$weatherInfo['weatherinfo']['WS']; 
$cityTime=$weatherInfo['weatherinfo']['time']; 
$citySD=$weatherInfo['weatherinfo']['SD']; 
echo $weatherinfo="城市名字：$cityName,氣溫：$cityTemp,風向：$cityWd"; 
?> 