コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > バックエンド開発 > PHPチュートリアル > PHP は天気 API を使用して天気情報を取得します

PHP は天気 API を使用して天気情報を取得します

WBOY
リリース： 2016-06-13 12:48:00
オリジナル
1455 人が閲覧しました

PHP は天気 API を使用して天気情報を取得します

??? China Weather Network はいくつかの気象クエリ API を提供しており、アクセスすると気象情報の JSON 形式のデータが返され、解析することで気象情報を取得できます。

http://www.weather.com.cn/data/sk/101281601.html

http://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 コード:
?実行結果: 
<!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">
					&times;
				</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
?ウェブページのパーツコード: 
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 サーバーから動的に読み取って動的にロードできるため、自分で変換を行う必要はありません。 ?
画像要素を含むデータがある場合は、画像へのリンクを見つけて画像をリンクするだけです。


終わりましたか?
関連ラベル：
data gt lt weather
ソース：php.cn
前の記事：フォーラムのトピック投稿とコメントが同じテーブル内でページ分割されない問題についてお聞きします。 次の記事：ソフトウェアのインストール手順と同様の php インストール パッケージを作成する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
PX から REM への自動変換エラー <style>html { font-size: calc(100vw / 3.75); }body { font-size: 0.16rem; }</style...
から 2024-04-16 09:34:16
0
0
4687
URL パラメータから取得した PHP 配列が期待どおりに動作しない カテゴリ ID を含む URL パラメータがあり、それを次のような配列として扱いたいと考えています: http://example.com?cat[]=3,9,13 PHP では、...
から 2024-04-06 22:09:02
0
1
1428
Reactのsortメソッドでレンダリング(フィルターとページネーションを使用)をトリガーするにはどうすればよいですか? これが私の Sort.js スタイル コンポーネントです: <SortWrapper><SortText>SortBy</SortText>&l...
から 2024-04-06 21:28:37
0
1
2257
グリッドを使用してこの特定のデザインを作成する: ステップバイステップ ガイド この画像に似たレイアウトを作成しようとしています。このグリッドを使用してみましたが、実現できません。 <ulclass="container">&l...
から 2024-04-06 20:29:08
0
2
492
3 レベル階層のカスタム分類を使用して woocommerce 関連製品を選択します 「スポーツ」というカスタム分類を持つ woocommerce ストアがあります。分類には、親、子、子という 3 つのレベルがあります。たとえば、屋内スポーツ > アリーナ ス...
から 2024-04-06 20:05:30
0
1
544
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート