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 相关文章推荐
PHP基础学习小结
Apr 17 PHP
让PHP更快的提供文件下载的代码
Jun 13 PHP
PHP常用的文件操作函数经典收藏
Apr 02 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
Sep 23 PHP
php数组去重实例及分析
Nov 26 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
Jun 12 PHP
php实现mysql备份恢复分卷处理的方法
Dec 26 PHP
PHP全局变量与超级全局变量区别分析
Apr 01 PHP
Yii框架表单模型和验证用法
May 20 PHP
支付宝服务窗API接口开发php版本
Jul 20 PHP
PHP生成图片验证码功能示例
Jan 12 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
Aug 27 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中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
Python中使用HTMLParser解析html实例
2015/02/08 Python
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
优良学风班申请材料
2014/02/13 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS