??? 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. この時点で、州コードがわかります。このようにして、州コードを知ることが最初のステップになります。ユーザーが選択するためのドロップダウン ボックスを作成することもできます:
省を知った後、この省にどのような都市があるのかを確認する必要があります。たとえば、雲南省は 05 です。すべての州と都市に関する情報を取得したい場合。雲南省では、次の場所を訪れる必要があります:
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|台湾
ログイン後にコピー
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回読み込んで都市名と都市コードを取得しました。
もちろん、データの解析は Javascript を使用して行うこともできますが、Ajax はクロスドメイン名アクセスをサポートしていないため、China Weather Network サーバーからローカルにデータを取得するには、その機能として単純なサーバー スクリプトが必要です。要求されたファイルを動的データ表示用の文字列として Javascript に返すだけです:
290205|101290205
ログイン後にコピー
まず、文字列を読み取る PHP を作成します
getstr.php
?Ajax を使用した js ファイル:
ajax.js
<?php echo file_get_contents($_GET['url']); ?>
ログイン後にコピー
?ウェブページのパーツコード:
?実行結果:
この方法では、ドロップダウン ボックス内のデータを 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 サーバーから動的に読み取って動的にロードできるため、自分で変換を行う必要はありません。 ?
画像要素を含むデータがある場合は、画像へのリンクを見つけて画像をリンクするだけです。
終わりましたか?
終わりましたか?