要在自己的网站上添加一个天气预报功能，是一个很普通的需求，实现起来也不是很难。今天来介绍几个简单的方法。

使用第三方服务

有这样的一种简单的方式，借助http://www.tianqi.com/plugin/网上的天气服务，可以定制我们的显示形状，实现添加天气预报的功能。

下面给出一个简单的小例子：

  1. <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>

间接方式

说是间接的获取天气信息，那是因为对于我们个人而言，是不可能自己发射卫星，或者维护天气预报那么大的计算量的服务的。我们是借助其他网站提供的数据接口来实现的。

思路

由于Ajax本身的特点决定了岂不能够跨域请求，所以我们需要借助PHP来试下代理的功能。具体思路如下：

使用到的服务

下面列出我们用到的一句常用的接口

下面的是几个很好的接口网站。

实现代码

代码的实现，分为三步。照应我们之前的逻辑来写即可。

  • 获取客户端ip对应的城市
  1. <?php
  2. header("Content-Type:text/json;charset=utf-8");
  3. // ajax 自身特性决定其不能跨域请求，所以使用php的代理模式来实现垮与请求
  4. //$url = 'http://www.weather.com.cn/adat/sk/101010100.html';
  6. // 1.获取文本内容信息；2获取url对应的数据
  7. //$data = file_get_contents($url);
  8. //echo $data;
  10. /////////////////////////////////////思路一
  11. // ip-->>城市----->>>城市代码----->>>> 天气信息
  12. //  获取ip对应的城市信息，以及编码 http://ip.taobao.com/service.getIpInfo.php?ip=60.205.8.179
  13. //   通过编码获得天气信息 http://www.weather.com.cn/adat/sk/编码.html
  14. $client_ip = "60.205.8.179";//$_SERVER['REMOTE_ADDR'];
  15. $url = "http://ip.taobao.com/service/getIpInfo.php?ip="."$client_ip";
  16. $result = file_get_contents($url);
  17. echo $result;
  19. /////////////////////////////////////思路二
  21. ?>

在客户端我们就可以看到

  1. <script>
  2.     function getcitycode(){
  3.         var xhr = new XMLHttpRequest();
  4.         xhr.onreadystatechange = function(){
  5.             if(xhr.readyState==4){
  6.                 //alert(xhr.responseText);
  7.                 eval('var citycode='+xhr.responseText);
  8.                 alert(citycode.data.city);
  9.             }
  10.         }
  11.         xhr.open('get','./getcityid.php');
  12.         xhr.send(null);
  13.     }
  15. </script>
  • 再向服务器请求一下城市代码，传给天气接口即可。
  1. <?php
  3. $city_id = $_GET['city'];
  4. //print_r($GET);
  5. 调用数据库代码逻辑，查找到对应的城市的城市编码
  6. 只需要从我们实现存储好的城市表中警醒查找即可。而且城市编码的表基本上不发生变化，我们可以稳定的使用。
  7. $weather_url = "http://www.weather.com.cn/adat/sk/".$city_id."html";
  8. $weather = file_get_contents($weather_url);
  9. echo $weather;
  11. ?>

前端完整代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>获取天气信息</title>
  6. <script>
  7. function getinfo(){
  8.     var ajax = new XMLHttpRequest();
  9.     ajax.onreadystatechange = function(){
  10.         if(ajax.readyState==4){
  11.             alert(ajax.responseText);
  12.             eval("var data=" + ajax.responseText);
  13.             alert(data);
  14.             document.getElementById("city").innerHTML =data.weatherinfo.city;
  15.             document.getElementById("cityid").innerHTML =data.weatherinfo.cityid;
  16.             document.getElementById("temp").innerHTML =data.weatherinfo.temp;
  17.             document.getElementById("WD").innerHTML =data.weatherinfo.WD;
  18.             document.getElementById("WS").innerHTML =data.weatherinfo.WS;
  19.             document.getElementById("SD").innerHTML =data.weatherinfo.SD;
  20.             document.getElementById("time").innerHTML =data.weatherinfo.time;
  21.         }
  22.     }
  23.     ajax.open('get','./getinfo.php');
  24.     ajax.send(null);
  26. }
  27. </script>
  29. </head>
  31. <body>
  32. <h3>获取城市代码</h3>
  33. <button type="button" onclick="getcitycode()">获取城市代码</button>
  34. <br />
  35. <script>
  36.     function getcitycode(){
  37.         var xhr = new XMLHttpRequest();
  38.         xhr.onreadystatechange = function(){
  39.             if(xhr.readyState==4){
  40.                 //alert(xhr.responseText);
  41.                 eval('var citycode='+xhr.responseText);
  42.                 alert(citycode.data.city);
  43.             }
  44.         }
  45.         xhr.open('get','./getcityid.php');
  46.         xhr.send(null);
  47.     }
  49. </script>
  50. <span id="cityid"></span>
  52. <h3>点击按钮获取天气信息</h3>
  53. <button name="getinfo" onclick="getinfo()">获取</button>
  54. <div>
  55. <span>城市名称</span><span id="city"></span><br />
  56. <span>城市代码</span><span id="cityid"></span><br />
  57. <span>当前温度</span><span id="temp"></span><br />
  58. <span>风向</span><span id="WD"></span><br />
  59. <span>风速</span><span id="WS"></span><br />
  60. <span>湿度</span><span id="SD"></span><br />
  61. <span>更新时间</span><span id="time"></span><br />
  63. </div>
  65. </body>
  66. </html>

总结

在自己的网站上添加一个天气预报功能，其实并不难。也许还有更为简单的方式，这里就算是一个抛砖引玉的过程吧。

PHP Ajax JavaScript Json 实现天气信息获取的更多相关文章

  1. ajax返回json时，js获取类型，是字符串类型

    ajax向php服务端请求,并返回json串给前端. js发现得到的返回值的类型是字符串,不能直接取json对象属性,需要JSON.parse(). 怎么解决呢? 这需要在php返回json时,加上一 ...

  2. php的curl获取https加密协议请求返回json数据进行信息获取

    <?php header("Content-type:text/html; charset=utf-8");function getToken($url){        $ ...

  3. 用百度SDK获取地理位置和天气信息

    以下实现通过百度SDK获取地理位置和天气信息,请參考title=android-locsdk/guide/v5-0">百度开发文档 1. 在相关下载最新的库文件.将so文件的压缩文件解 ...

  4. ESP32 IDF 获取天气信息

    一.注册天气获取账号 我使用的知心天气,没有获取天气账号的小伙伴可以去注册一下,知心天气官网:https://www.seniverse.com/ 取得天气获取的API后,可以直接在浏览器中访问测试一 ...

  5. ajax无刷新获取天气信息

    浏览器由于安全方面的问题,禁止ajax跨域请求其他网站的数据,但是可以再本地的服务器上获取其他服务器的信息,在通过ajax请求本地服务来实现: <?php header("conten ...

  6. ASP获取json天气信息

    ASP代码(ASP获取页面源码方法,有编码.超时时间参数,处理了乱码.超时的问题): Function GetHttpPage(HttpUrl) Then GetHttpPage="$Fal ...

  7. javaWeb - 2 — ajax、json — 最后附：后台获取前端中的input type = "file"中的信息 — 更新完毕

    1.ajax是什么? 面向百度百科一下就知道了,这里就简单提炼一下 Ajax即Asynchronous Javascript And XML(异步JavaScript和XML).当然其实我们学的应该叫 ...

  8. 利用json获取天气信息

    天气预报信息获取是利用json获取的,网上有非常多资源,源码.因为上面涉及到非常多天气信息,包含湿度,出行建议等,以及加入了全部城市代码的资源包.为了练手了解json的原理.我仅获取诚笃城市的最高温, ...

  9. 内网公告牌获取天气信息解决方案(C# WebForm)

    需求:内网公告牌能够正确显示未来三天的天气信息 本文关键字:C#/WebForm/Web定时任务/Ajax跨域 规划: 1.天定时读取百度接口获取天气信息并存储至Txt文档: 2.示牌开启时请求Web ...

随机推荐

  1. 【PYTHON】用户登录三次错误锁定

    黑名单:blacklist.txt 用户名单:username_password.py # Author:Stephen Yuan # 用户名和密码 username_password = { ', ...

  2. CSS常用字体属性(多出的文本隐藏，或者以省略号的形式显示)和背景样式以及背景图的2个不常用属性：background-origin和background-clip

    (一)常用的字体属性: font-weight: 属性值100-900  400等于正常 700等于bold ,数值越大,越粗 font-size:字体大小,单位可以为px或者% font-famil ...

  3. mysql之子查询作业

    #数据准备drop table if exists class;create table class(    class_no int(2) unsigned zerofill primary key ...

  4. [POI2009]KAM-Pebbles

    题目描述 Johny and Margaret are playing "pebbles". Initially there is a certain number of pebb ...

  5. TopCoder SRM 558 Div 1 - Problem 1000 SurroundingGame

    传送门:https://284914869.github.io/AEoj/558.html 题目简述  一个人在一个n * m棋盘上玩游戏,想要占领一个格子有两个方法: 在这个格子放一个棋子.  这个 ...

  6. Codeforces 429E Points and Segments

    Description 题面 题目大意:有 \(n\) 个区间 \([L_i,R_i]\) ,你要给每一个区间染红蓝,使得每一个位置被红色染过的次数与被蓝色染过的次数差的绝对值不大于\(1\) Sol ...

  7. dp之背包总结篇

    //新手DP学习中 = =!! 前言:背包问题在dp中可以说是经典,作为一个acmer,到现在才正式学习dp,可以说是比较失败的.我个人比较认同一点,想要做一个比较成功的acmer,dp.搜索.数学必 ...

  8. [BZOJ]3527 力(ZJOI2014)

    第一次背出FFT模板,在此mark一道裸题. Description 给出n个数qi,给出Fj的定义如下: 令Ei=Fi/qi,求Ei. Input 第一行一个整数n. 接下来n行每行输入一个数,第i ...

  9. 伸展树Splay【非指针版】

    ·伸展树有以下基本操作(基于一道强大模板题:codevs维护队列): a[]读入的数组;id[]表示当前数组中的元素在树中节点的临时标号;fa[]当前节点的父节点的编号;c[][]类似于Trie,就是 ...

  10. 使用JAXB解析xml文件(二)

    前面一章简单演示了JAXB的用法,这个章节主要梳理一下JAXB常见的几个注解 1.@XmlRootElement 用于类级别的注解,对应xml的跟元素,常与 @XmlType 和 @XmlAccess ...