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

使用第三方服务

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

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

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

// 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['REMOTE_ADDR'];
$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('var citycode='+xhr.responseText);
                alert(citycode.data.city);
            }
        }
        xhr.open('get','./getcityid.php');
        xhr.send(null);
    }

</script>
  • 再向服务器请求一下城市代码，传给天气接口即可。
<?php

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

?>

前端完整代码

<!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>点击按钮获取天气信息</h3>
<button name="getinfo" onclick="getinfo()">获取</button>
<div>
<span>城市名称</span><span id="city"></span><br />
<span>城市代码</span><span id="cityid"></span><br />
<span>当前温度</span><span id="temp"></span><br />
<span>风向</span><span id="WD"></span><br />
<span>风速</span><span id="WS"></span><br />
<span>湿度</span><span id="SD"></span><br />
<span>更新时间</span><span id="time"></span><br />

</div>

</body>
</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. java制作验证码（java验证码小程序）

    手动制作java的验证码 Web应用验证码的组成: (1)输入框 (2)显示验证码的图片 验证码的制作流程: 生成验证码的容器使用 j2ee的servlet 生成图片需要的类: (1) Buffere ...

  2. Java必须了解的“递归”与“IO流”！！！

    >>>First: 递归! 1. 定义: 在函数自身内部,调用函数本身的方式,称为递归. 2. 注意: 递归包括递进去.归出来两步. 首先,依次执行[函数调自身语句]上半部分的代码, ...

  3. [HAOI2016]找相同字符

    题目描述 给定两个字符串,求出在两个字符串中各取出一个子串使得这两个子串相同的方案数.两个方案不同当且仅当这两个子串中有一个位置不同. 输入输出格式 输入格式: 两行,两个字符串s1,s2,长度分别为 ...

  4. codeforces 842C Ilya And The Tree

    Ilya is very fond of graphs, especially trees. During his last trip to the forest Ilya found a very ...

  5. 计蒜客NOIP模拟赛4 D1T1 小X的质数

    小 X 是一位热爱数学的男孩子,在茫茫的数字中,他对质数更有一种独特的情感.小 X 认为,质数是一切自然数起源的地方. 在小 X 的认知里,质数是除了本身和 1以外,没有其他因数的数字. 但由于小 X ...

  6. 【网络流问题·我就想建好模】

    ·为了有助于你读后文,在写题前先列出一些大米饼的代码习惯: 一个提醒:所有的ADD函数无特殊说明均如图:(没有w就直接跳过) 以及: go(i,a,b)=====for(int i=a;i<=b ...

  7. [BZOJ]1046 上升序列(HAOI2007)

    和字典序有关的题型啊. Description 对于一个给定的S={a1,a2,a3,…,an},若有P={ax1,ax2,ax3,…,axm},满足(x1 < x2 < … < x ...

  8. 计科1702冯亚杰C语言程序设计预备作业

    阅读邹欣老师的博客--师生关系,针对文中的几种师生关系谈谈你的看法,你期望的师生关系是什么样的? 答:首先老师和学生之间要互相尊重,我认为这是必要的.在第一点的基础上师生要互相帮助,互相配合,共同进步 ...

  9. Zend引擎探索 之 PHP中前置递增不返回左值

    首先来讲,一般我们对"左值"的理解就是可以出现在赋值运算符的左侧的标识符,也就是可以被赋值.这样讲也许并不十分确切,在不同的语言中对左值的定义也不尽相同.在这里我们讨论前置递增(和 ...

  10. 两个对象用equals方法比较为true，它们的Hashcode值相同吗？

    两个对象用equals方法比较为true,它们的Hashcode值相同吗? 答:不一定相同.正常情况下,因为equals()方法比较的就是对象在内存中的值,如果值相同,那么Hashcode值也应该相同 ...