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 相关文章推荐
怎么使 Mysql 数据同步
Oct 09 PHP
php adodb连接带密码access数据库实例,测试成功
May 14 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
Feb 13 PHP
Laravel 5框架学习之向视图传送数据
Apr 08 PHP
浅析PHP中Session可能会引起并发问题
Jul 23 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
Apr 25 PHP
PHP之将POST数据转化为字符串的实现代码
Nov 03 PHP
PHP基于接口技术实现简单的多态应用完整实例
Apr 26 PHP
浅谈PHP中的Trait使用方法
Mar 22 PHP
thinkphp整合系列之极验滑动验证码geetest功能
Jun 18 PHP
在Laravel 的 Blade 模版中实现定义变量
Oct 14 PHP
TP5框架实现自定义分页样式的方法示例
Apr 05 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小偷相关截取函数备忘
2010/11/28 PHP
自定义php类(查找/修改)xml文档
2013/03/26 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
Python构建XML树结构的方法示例
2017/06/30 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
python破解同事的压缩包密码
2020/10/14 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
上课睡觉检讨书
2014/01/28 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
开学季活动策划方案
2014/02/28 职场文书
职工小家建设活动方案
2014/08/25 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
毕业生实习证明
2014/09/19 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
八月迷情观后感
2015/06/11 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书