??? China Weather Network はいくつかの気象クエリ API を提供しており、アクセスすると気象情報の JSON 形式のデータが返され、解析することで気象情報を取得できます。
http://www.weather.com.cn/data/sk/101281601.htmlhttp://www.weather.com.cn/data/cityinfo/101281601.html
http:/ /m.weather.com.cn/data/101281601.html
?返された utf-8 文字列
{"weatherinfo":{"city":"东莞","cityid":"101281601","temp":"22","WD":"东风","WS":"1级","SD":"90%","WSE":"1","time":"08:20","isRadar":"0","Radar":""}} では、まず都市名を都市コードに変換する必要があります。最も簡単な方法は、というテキスト ファイルを読み取ることです。
形式:
101010100=北京 101010200=海淀 101010300=朝阳 101010400=顺义 101010500=怀柔 101010600=通州 101010700=昌平 101010800=延庆 101010900=丰台 101011000=石景山 101011100=大兴?
テキスト ファイルと PHP ファイルは同じディレクトリに配置されます。
PHP コード:
?実行結果:
方法 2:
1. ファイルを使用する代わりに、Weather Network サーバーから都市名と ID を動的に取得できます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://libs.baidu.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
<link href="http://libs.baidu.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet"/>
<title>天气查询简单版</title>
</head>
<body>
<form class="form-horizontal" action="" method="post">
<legend>
Weather
</legend>
<div class="control-group">
<label class="control-label" for="idCity">城市：</label>
<div class="controls">
<input name="city" type="text" name="city" id="idCity" placeholder="请输入城市名字" maxlength="64">
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-primary" style="margin: 10px">
确定
</button>
<button type="reset" class="btn btn-inverse" style="margin: 10px">
重置
</button>
</div>
</div>
</form>
<hr/>
<?php
header("Content-Type: text/html; charset=utf-8");
function getWeather($city) {
$wcity = file_get_contents("wcity.txt");
$pattern = '/([0-9]+)=' . $city . '/';
preg_match($pattern, $wcity, $matches, PREG_OFFSET_CAPTURE);
if ($matches == null) {
return null;
}
$cityID = $matches[1][0];
$data = file_get_contents('http://www.weather.com.cn/data/sk/' . $cityID . '.html');
return json_decode($data, true);
}
if ($_POST != null && $_POST["city"] != null) {
$weather = getWeather($_POST["city"]);
if ($weather == null) {?>
<div class="alert alert-block" style="margin: 20px">
<button type="button" class="close" data-dismiss="alert">
×
</button>
<h4>警告!</h4>
发生错误了亲，您输入的城市好像没有找到哦！
</div>
<?php return;
}
$info = $weather["weatherinfo"];
?>
<table class="table table-striped table-bordered" style="margin-left: 20px;width: 200px">
<thead>
<th>实时天气信息</th>
</thead>
<tbody>
<?php
echo "<tr><td>城市：</td><td>".$info["city"]."</td></tr>";
echo "<tr><td>城市ID：</td><td>".$info["cityid"]."</td></tr>";
echo "<tr><td>气温：</td><td>".$info["temp"]."℃</td></tr>";
echo "<tr><td>风向：</td><td>".$info["WD"]."</td></tr>";
echo "<tr><td>风力：</td><td>".$info["WS"]."</td></tr>";
echo "<tr><td>湿度：</td><td>".$info["SD"]."</td></tr>";
echo "<tr><td>更新时间：</td><td>".$info["time"]."</td></tr>";
?>
</tbody>
</table>
<?php
}
?>
</body>
</html>
方法 2:
1. ファイルを使用する代わりに、Weather Network サーバーから都市名と ID を動的に取得できます。
このアドレスにアクセスした場合
http://m.weather.com.cn/data5/city.xml?
サーバーは次のコードを返します:
2. この時点で、州コードがわかります。このようにして、州コードを知ることが最初のステップになります。ユーザーが選択するためのドロップダウン ボックスを作成することもできます:
01|北京,02|上海,03|天津,04|重庆,05|黑龙江,06|吉林,07|辽宁,08|内蒙古,09|河北,10|山西,11|陕西,12|山东,13|新疆,14|西藏,15|青海,16|甘肃,17|宁夏,18|河南,19|江苏,20|湖北,21|浙江,22|安徽,23|福建,24|江西,25|湖南,26|贵州,27|四川,28|广东,29|云南,30|广西,31|海南,32|香港,33|澳门,34|台湾省を知った後、この省にどのような都市があるのかを確認する必要があります。たとえば、雲南省は 05 です。すべての州と都市に関する情報を取得したい場合。雲南省では、次の場所を訪れる必要があります:
http://m.weather.com.cn/data5/city29.xml?
返信テキスト:
?3. ただし、これでは十分ではありません。たとえば、大理県にある県レベルの都市と県を知りたい場合は、次の訪問を続ける必要があります。
?
2901|昆明,2902|大理,2903|红河,2904|曲靖,2905|保山,2906|文山,2907|玉溪,2908|楚雄,2909|普洱,2910|昭通,2911|临沧,2912|怒江,2913|迪庆,2914|丽江,2915|德宏,2916|西双版纳
http://m.weather.com.cn/data5/city2902.xml
案の定、次の結果が返されました:
?4. この時点ですべての都市名が見つかりましたが、このコードは最終的な都市コードではないため、ビン川のコードを再度見つける必要があります:
290201|大理,290202|云龙,290203|漾濞,290204|永平,290205|宾川,290206|弥渡,290207|祥云,290208|巍山,290209|剑川,290210|洱源,290211|鹤庆,290212|南涧?
http://m.weather.com.cn/data5/city290205.xml
?
?これまでに4回読み込んで都市名と都市コードを取得しました。
290205|101290205もちろん、データの解析は Javascript を使用して行うこともできますが、Ajax はクロスドメイン名アクセスをサポートしていないため、China Weather Network サーバーからローカルにデータを取得するには、その機能として単純なサーバー スクリプトが必要です。要求されたファイルを動的データ表示用の文字列として Javascript に返すだけです:
まず、文字列を読み取る PHP を作成します
getstr.php
?Ajax を使用した js ファイル:
<?php echo file_get_contents($_GET['url']); ?>ajax.js
?ウェブページのパーツコード:
この方法では、ドロップダウン ボックス内のデータを Weather Network サーバーから動的に読み取って動的にロードできるため、自分で変換を行う必要はありません。 ?
function Ajax(recvType) {
var aj = new Object();
aj.recvType = recvType ? recvType.toUpperCase() : 'HTML'//HTML XML
aj.targetUrl = '';
aj.sendString = '';
aj.resultHandle = null;
aj.createXMLHttpRequest = function() {
var request = false;
//window对象中有XMLHttpRequest存在就是非IE，包括（IE7，IE8）
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
if (request.overrideMimeType) {
request.overrideMimeType("text/xml");
}
//window对象中有ActiveXObject属性存在就是IE
} else if (window.ActiveXObject) {
var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
for (var i = 0; i < versions.length; i++) {
try {
request = new ActiveXObject(versions[i]);
if (request) {
return request;
}
} catch(e) {
request = false;
}
}
}
return request;
}
aj.XMLHttpRequest = aj.createXMLHttpRequest();
aj.processHandle = function() {
if (aj.XMLHttpRequest.readyState == 4) {
if (aj.XMLHttpRequest.status == 200) {
if (aj.recvType == "HTML")
aj.resultHandle(aj.XMLHttpRequest.responseText);
else if (aj.recvType == "XML")
aj.resultHandle(aj.XMLHttpRequest.responseXML);
}
}
}
aj.get = function(targetUrl, resultHandle) {
aj.targetUrl = targetUrl;
if (resultHandle != null) {
aj.XMLHttpRequest.onreadystatechange = aj.processHandle;
aj.resultHandle = resultHandle;
}
if (window.XMLHttpRequest) {
aj.XMLHttpRequest.open("get", aj.targetUrl);
aj.XMLHttpRequest.send(null);
} else {
aj.XMLHttpRequest.open("get", aj.targetUrl, true);
aj.XMLHttpRequest.send();
}
}
aj.post = function(targetUrl, sendString, resultHandle) {
aj.targetUrl = targetUrl;
if ( typeof (sendString) == "object") {
var str = "";
for (var pro in sendString) {
str += pro + "=" + sendString[pro] + "&";
}
aj.sendString = str.substr(0, str.length - 1);
} else {
aj.sendString = sendString;
}
if (resultHandle != null) {
aj.XMLHttpRequest.onreadystatechange = aj.processHandle;
aj.resultHandle = resultHandle;
}
aj.XMLHttpRequest.open("post", targetUrl);
aj.XMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
aj.XMLHttpRequest.send(aj.sendString);
}
return aj;
}
?実行結果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://libs.baidu.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
<link href="http://libs.baidu.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet"/>
<title>实时气温信息</title>
<script type="text/javascript" src="./ajax.js"></script>
<script type="text/javascript">
function str2Array(data) {
data = data.replace(/\|/g, "\":\"");
data = data.replace(/,/g, "\",\"");
data = '({\"' + data + '\"})';
return eval(data);
}
function getProvince() {
var ajax = Ajax();
ajax.get("getstr.php?url=http://m.weather.com.cn/data5/city.xml", function(data) {
var arr = str2Array(data);
var prov = document.getElementById("province");
for (var p in arr) {
prov.options.add(new Option(arr[p], p));
}
prov.options.selectedIndex = 0;
getCity(prov.value);
});
}
function getCity(provId) {
var ajax = Ajax();
ajax.get("getstr.php?url=http://m.weather.com.cn/data5/city" + provId + ".xml", function(data) {
var arr = str2Array(data);
var city = document.getElementById("city");
for (var i = city.options.length; i >= 0; i--) {
city.remove(i);
}
for (var p in arr) {
city.options.add(new Option(arr[p], p));
}
getTown(city.value);
});
}
function getTown(provId) {
var ajax = Ajax();
ajax.get("getstr.php?url=http://m.weather.com.cn/data5/city" + provId + ".xml", function(data) {
var arr = str2Array(data);
var town = document.getElementById("town");
for (var i = town.options.length; i >= 0; i--) {
town.remove(i);
}
for (var p in arr) {
town.options.add(new Option(arr[p], p));
}
getCityId();
});
}
function getCityId() {
var ajax = Ajax();
var index = document.getElementById("town").value;
ajax.get("getstr.php?url=http://m.weather.com.cn/data5/city" + index + ".xml", function(data) {
var arr = str2Array(data);
cityId = arr[index];
showWeather(cityId);
});
}
function insertTab(tab, cel1, cel2) {
var newRow = tab.insertRow(tab.rows.length);
var cell = newRow.insertCell(0);
cell.innerHTML = cel1;
var cell = newRow.insertCell(1);
cell.innerHTML = cel2;
}
function showWeather(cityId) {
if (cityId == null) {
return;
}
var ajax = Ajax();
ajax.get("getstr.php?url=http://www.weather.com.cn/data/sk/" + cityId + ".html", function(data) {
data = '(' + data + ')';
var info = eval(data)["weatherinfo"];
var tab = document.getElementById("weather");
var len = tab.rows.length;
while(len-- > 0){
tab.deleteRow(len);
}
insertTab(tab, "城市：", info["city"]);
insertTab(tab, "城市ID：", info["cityid"]);
insertTab(tab, "气温：", info["temp"] + "℃");
insertTab(tab, "风向：", info["WD"]);
insertTab(tab, "风力：", info["WS"]);
insertTab(tab, "湿度：", info["SD"]);
insertTab(tab, "更新时间：", info["time"]);
});
}
getProvince();
</script>
<style type="text/css">
select {
width: 100px;
}
</style>
</head>
<body>
<div style="margin: 20px">
<legend>
Weather
</legend>
<br>
<select id="province" onchange="getCity(this.value)" ></select>
<select id="city" onchange="getTown(this.value)" ></select>
<select id="town" onchange="getCityId()" ></select>
<br>
<table id="weather" class="table table-striped table-bordered" style="width: 310px"></table>
</div>
</body>
</html>
この方法では、ドロップダウン ボックス内のデータを Weather Network サーバーから動的に読み取って動的にロードできるため、自分で変換を行う必要はありません。 ?画像要素を含むデータがある場合は、画像へのリンクを見つけて画像をリンクするだけです。
終わりましたか?
終わりましたか?