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

时间：2021-02-16 10:40:01|栏目：JavaScript代码|点击：次

用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"; 
 
?>

上一篇：ES6中定义类和对象的方法示例

栏目：JavaScript代码

下一篇：js opener的使用详解

本文标题：PHP+AJAX无刷新实现返回天气预报数据

本文地址：http://www.codeinn.net/misctech/63771.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程