ホームページ > 記事 > バックエンド開発 > PHP Ajax JavaScript Jsonで天気情報を取得するメソッドを実装

PHP Ajax JavaScript Jsonで天気情報を取得するメソッドを実装

墨辰丷オリジナル: 2018-06-01 15:18:161652ブラウズ

この記事では主に、PHP Ajax JavaScript Json を使用した天気情報の取得に関する関連情報を紹介します。興味のある方は参考にしてください。

Web サイトに天気予報機能を追加するのは、非常に一般的な要件です。今日は簡単な方法をいくつか紹介します。

サードパーティサービスの使用

オンライン天気サービスの助けを借りて、表示形状をカスタマイズし、天気の機能を追加することができます。予報。

簡単な例を以下に示します:

コードをコピーするコードは次のとおりです:

<iframe width="420" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=1&num=5"></iframe>

間接的な方法

それは間接的に気象情報を取得すると言われています。自分たちで衛星を打ち上げたり、天気予報のような大量のサービスを維持したりすることは不可能です。これは、他の Web サイトが提供するデータインターフェイスを利用して行われます。

アイデア

Ajax自体の特性上、クロスドメインリクエストを行うことができないため、PHPを使用してプロキシ機能を試す必要があります。具体的なアイデアは次のとおりです。

クライアントは Web ページを開き、PHP に基づいてクライアント IP を取得します。サードパーティのサービスを使用して、IP に対応する都市コードを取得します。気象インターフェイスを呼び出して気象情報を取得します。クライアントはサーバーから返されたデータを取得し、ページに表示します。

使用されるサービス

以下は私たちが使用する一般的なインターフェイスのリストです

•IPから都市へ: "http://ip.taobao.com/service/getIpInfo.php?ip=XXX"
•コードを表示対応する都市の情報: http://blog.csdn.net/anbowing/article/details/21936293
•データを取得するには天気予報インターフェイスにアクセスします: "http://www.weather.com.cn/adat/sk/" .$city_id."html"

以下は、優れたインターフェースの Web サイトをいくつか紹介します。

•天気 API インターフェースの包括的なリスト

実装コード

コードの実装は 3 つのステップに分かれています。先ほどのロジックに従って書くだけです。

•クライアントIPに対応する都市を取得します

<?php
header("Content-Type:text/json;charset=utf-8");
// ajax 自身特性决定其不能跨域请求，所以使用php的代理模式来实现垮与请求
//$url = &#39;http://www.weather.com.cn/adat/sk/101010100.html&#39;;

// 1.获取文本内容信息；2获取url对应的数据
//$data = file_get_contents($url);
//echo $data;

/////////////////////////////////////思路一
// ip-->>城市----->>>城市代码----->>>> 天气信息
// 获取ip对应的城市信息，以及编码 http://ip.taobao.com/service.getIpInfo.php?ip=60.205.8.179
// 通过编码获得天气信息 http://www.weather.com.cn/adat/sk/编码.html
$client_ip = "60.205.8.179";//$_SERVER[&#39;REMOTE_ADDR&#39;];
$url = "http://ip.taobao.com/service/getIpInfo.php?ip="."$client_ip";
$result = file_get_contents($url);
echo $result;


/////////////////////////////////////思路二


?>

クライアント上で確認できます

<script>
 function getcitycode(){
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
   if(xhr.readyState==4){
    //alert(xhr.responseText); 
    eval(&#39;var citycode=&#39;+xhr.responseText);
    alert(citycode.data.city);
   }
  }
  xhr.open(&#39;get&#39;,&#39;./getcityid.php&#39;);
  xhr.send(null);
 }


</script>

•サーバーから都市コードをリクエストし、それを天気インターフェースに渡します。

<?php

$city_id = $_GET[&#39;city&#39;];
//print_r($GET);
调用数据库代码逻辑，查找到对应的城市的城市编码
只需要从我们实现存储好的城市表中警醒查找即可。而且城市编码的表基本上不发生变化，我们可以稳定的使用。
$weather_url = "http://www.weather.com.cn/adat/sk/".$city_id."html";
$weather = file_get_contents($weather_url);
echo $weather;



?>

完全なフロントエンドコード





获取天气信息
<script>
function getinfo(){
 var ajax = new XMLHttpRequest();
 ajax.onreadystatechange = function(){
  if(ajax.readyState==4){
   alert(ajax.responseText);
   eval("var data=" + ajax.responseText);
   alert(data);
   document.getElementById("city").innerHTML =data.weatherinfo.city;
   document.getElementById("cityid").innerHTML =data.weatherinfo.cityid;
   document.getElementById("temp").innerHTML =data.weatherinfo.temp;
   document.getElementById("WD").innerHTML =data.weatherinfo.WD;
   document.getElementById("WS").innerHTML =data.weatherinfo.WS;
   document.getElementById("SD").innerHTML =data.weatherinfo.SD;
   document.getElementById("time").innerHTML =data.weatherinfo.time; 
  }
 }
 ajax.open(&#39;get&#39;,&#39;./getinfo.php&#39;);
 ajax.send(null);

}
</script>





获取城市代码



<script>
 function getcitycode(){
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
   if(xhr.readyState==4){
    //alert(xhr.responseText); 
    eval(&#39;var citycode=&#39;+xhr.responseText);
    alert(citycode.data.city);
   }
  }
  xhr.open(&#39;get&#39;,&#39;./getcityid.php&#39;);
  xhr.send(null);
 }


</script>





点击按钮获取天气信息


城市名称

城市代码

当前温度

风向

风速

湿度

更新时间

概要

Webサイトに天気予報機能を追加するのは、実は難しくありません。おそらく、もっと簡単な方法があるでしょう。これは、何か新しいことを始めるプロセスにすぎません。

以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。

PHP Ajax JavaScript Jsonで天気情報を取得するメソッドを実装

获取城市代码

点击按钮获取天气信息

関連記事