PHP Ajax JavaScript Json获取天气信息实现代码


Posted in PHP onAugust 17, 2016

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

使用第三方服务

有这样的一种简单的方式,借助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来试下代理的功能。具体思路如下:

PHP Ajax JavaScript Json获取天气信息实现代码

客户端打开我们的网页根据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”

下面的是几个很好的接口网站。
 •天气API接口大全 

实现代码

代码的实现,分为三步。照应我们之前的逻辑来写即可。
 •获取客户端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 相关文章推荐
多文件上载系统完整版
Oct 09 PHP
php foreach、while性能比较
Oct 15 PHP
apache+php完美解决301重定向的两种方法
Jun 08 PHP
php数组中删除元素之重新索引的方法
Sep 16 PHP
PHP实现图片裁剪、添加水印效果代码
Oct 01 PHP
php连接odbc数据源并保存与查询数据的方法
Dec 24 PHP
php获得网站访问统计信息类Compete API用法实例
Apr 02 PHP
PHP错误Warning:mysql_query()解决方法
Oct 24 PHP
学习php设计模式 php实现享元模式(flyweight)
Dec 07 PHP
PHP开发APP端微信支付功能
Feb 17 PHP
Laravel 队列使用的实现
Jan 08 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
Oct 12 PHP
PHP文件下载实例代码浅析
Aug 17 #PHP
PHP Ajax实现无刷新附件上传
Aug 17 #PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
Aug 17 #PHP
全面解析PHP验证码的实现原理 附php验证码小案例
Aug 17 #PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
Aug 17 #PHP
总结PHP中数值计算的注意事项
Aug 14 #PHP
示例详解Laravel的注册重构
Aug 14 #PHP
You might like
php出租房数据管理及搜索页面
2017/05/23 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
详解Python用户登录接口的方法
2019/04/17 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
python之array赋值技巧分享
2019/11/28 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
小学教学工作总结2015
2015/05/13 职场文书