当前位置：Gxlcms > AJAX > PHP+AJAX无刷新实现返回天气预报数据

PHP+AJAX无刷新实现返回天气预报数据

时间：2021-07-01 10:21:17 帮助过：17人阅读

用php来写一个天气预报的模块

天气数据是通过采集中国气象网站的。本来中国天气网站也给出了数据的API接口。以下是API的地址。返回的数据格式为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中的数字”101010100“是城市代码。所以可以先列出每个城市的城市代码，然后php程序接收到了城市代码，再去组装URL，在通过URL来显示该城市的实时天气。

index.php
代码如下:


<?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 
 代码如下:
<?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"; 
?>

PHP+AJAX无刷新实现返回天气预报数据

人气教程排行