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

前端技术 2023/09/06 AJAX
用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\";
?>

本文地址：https://www.stayed.cn/item/17571

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案