要在自己的網(wǎng)站上添加一個(gè)天氣預(yù)報(bào)功能，是一個(gè)很普通的需求，實(shí)現(xiàn)起來也不是很難。今天來介紹幾個(gè)簡(jiǎn)單的方法。
使用第三方服務(wù)
有這樣的一種簡(jiǎn)單的方式，借助http://www.tianqi.com/plugin/網(wǎng)上的天氣服務(wù)，可以定制我們的顯示形狀，實(shí)現(xiàn)添加天氣預(yù)報(bào)的功能。
下面給出一個(gè)簡(jiǎn)單的小例子：
間接方式
說是間接的獲取天氣信息，那是因?yàn)閷?duì)于我們個(gè)人而言，是不可能自己發(fā)射衛(wèi)星，或者維護(hù)天氣預(yù)報(bào)那么大的計(jì)算量的服務(wù)的。我們是借助其他網(wǎng)站提供的數(shù)據(jù)接口來實(shí)現(xiàn)的。
思路
由于Ajax本身的特點(diǎn)決定了豈不能夠跨域請(qǐng)求，所以我們需要借助PHP來試下代理的功能。具體思路如下：
客戶端打開我們的網(wǎng)頁根據(jù)PHP獲得客戶端IP使用第三方服務(wù)獲取該IP對(duì)應(yīng)的城市編碼調(diào)用天氣接口，根據(jù)城市編碼來獲取天氣信息客戶端獲得服務(wù)器返回的數(shù)據(jù)，并顯示到頁面上。
使用到的服務(wù)
下面列出我們用到的一句常用的接口
•ip轉(zhuǎn)城市：”http://ip.taobao.com/service/getIpInfo.php?ip=XXX”
•查看對(duì)應(yīng)的城市的代碼：http://blog.csdn.net/anbowing/article/details/21936293
•訪問天氣接口，獲取數(shù)據(jù)：”http://www.weather.com.cn/adat/sk/“.$city_id.”html”
下面的是幾個(gè)很好的接口網(wǎng)站。
•天氣API接口大全
實(shí)現(xiàn)代碼
代碼的實(shí)現(xiàn)，分為三步。照應(yīng)我們之前的邏輯來寫即可。
•獲取客戶端ip對(duì)應(yīng)的城市
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<?phpheader("Content-Type:text/json;charset=utf-8");// ajax 自身特性決定其不能跨域請(qǐng)求，所以使用php的代理模式來實(shí)現(xiàn)垮與請(qǐng)求//$url = 'http://www.weather.com.cn/adat/sk/101010100.html';// 1.獲取文本內(nèi)容信息；2獲取url對(duì)應(yīng)的數(shù)據(jù)//$data = file_get_contents($url);//echo $data;/////////////////////////////////////思路一// ip-->>城市----->>>城市代碼----->>>> 天氣信息// 獲取ip對(duì)應(yīng)的城市信息，以及編碼 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['REMOTE_ADDR'];$url = "http://ip.taobao.com/service/getIpInfo.php?ip="."$client_ip";$result = file_get_contents($url);echo $result;/////////////////////////////////////思路二?> |
在客戶端我們就可以看到
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<script> function getcitycode(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState==4){ //alert(xhr.responseText); eval('var citycode='+xhr.responseText); alert(citycode.data.city); } } xhr.open('get','./getcityid.php'); xhr.send(null); }</script> |
•再向服務(wù)器請(qǐng)求一下城市代碼，傳給天氣接口即可。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<?php$city_id = $_GET['city'];//print_r($GET);調(diào)用數(shù)據(jù)庫代碼邏輯，查找到對(duì)應(yīng)的城市的城市編碼只需要從我們實(shí)現(xiàn)存儲(chǔ)好的城市表中警醒查找即可。而且城市編碼的表基本上不發(fā)生變化，我們可以穩(wěn)定的使用。$weather_url = "http://www.weather.com.cn/adat/sk/".$city_id."html";$weather = file_get_contents($weather_url);echo $weather;?> |
前端完整代碼
|
1
2
3
4
5
6
7
8
9
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>獲取天氣信息</title><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('get','./getinfo.php'); ajax.send(null);}</script></head><body><h3>獲取城市代碼</h3><button type="button" onclick="getcitycode()">獲取城市代碼</button><br /><script> function getcitycode(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState==4){ //alert(xhr.responseText); eval('var citycode='+xhr.responseText); alert(citycode.data.city); } } xhr.open('get','./getcityid.php'); xhr.send(null); }</script><span id="cityid"></span><h3>點(diǎn)擊按鈕獲取天氣信息</h3><button name="getinfo" onclick="getinfo()">獲取</button><div><span>城市名稱</span><span id="city"></span><br /><span>城市代碼</span><span id="cityid"></span><br /><span>當(dāng)前溫度</span><span id="temp"></span><br /><span>風(fēng)向</span><span id="WD"></span><br /><span>風(fēng)速</span><span id="WS"></span><br /><span>濕度</span><span id="SD"></span><br /><span>更新時(shí)間</span><span id="time"></span><br /></div></body></html> |
總結(jié)
在自己的網(wǎng)站上添加一個(gè)天氣預(yù)報(bào)功能，其實(shí)并不難。也許還有更為簡(jiǎn)單的方式，這里就算是一個(gè)拋磚引玉的過程吧。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
