??? 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 を動的に取得できます。
<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>
警告!
发生错误了亲，您输入的城市好像没有找到哦！| 实时天气信息 | 城市： | ".$info["city"]." | "; echo "
|---|---|
| 城市ID： | ".$info["cityid"]." |
| 气温： | ".$info["temp"]."℃ |
| 风向： | ".$info["WD"]." |
| 风力： | ".$info["WS"]." |
| 湿度： | ".$info["SD"]." |
| 更新时间： | ".$info["time"]." |
方法 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
?実行結果: <div class="iteye-blog-content-contain" style="font-size: 14px;">
<pre name="code" class="html">
<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>
<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>
この方法では、ドロップダウン ボックス内のデータを Weather Network サーバーから動的に読み取って動的にロードできるため、自分で変換を行う必要はありません。 ?画像要素を含むデータがある場合は、画像へのリンクを見つけて画像をリンクするだけです。
終わりましたか?
終わりましたか?
