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 相关文章推荐
增加反向链接的101个方法 站长推荐
Jan 31 PHP
php 无限极分类
Mar 27 PHP
PHP URL地址获取函数代码(端口等) 推荐
May 15 PHP
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
Jun 16 PHP
ThinkPHP3.1新特性之查询条件预处理简介
Jun 19 PHP
destoon实现调用自增数字从1开始的方法
Aug 21 PHP
php批量删除cookie的简单实现方法
Jan 26 PHP
php递归实现无限分类的方法
Jul 28 PHP
php 二维数组时间排序实现代码
Nov 19 PHP
php的常量和变量实例详解
Jun 27 PHP
php批量转换文件夹下所有文件编码的函数类
Aug 06 PHP
PHP封装XML和JSON格式数据接口操作示例
Mar 06 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/05/12 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
Python实现的彩票机选器实例
2015/06/17 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
Python验证码截取识别代码实例
2020/05/16 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
汽车专业求职信
2014/06/05 职场文书
车贷收入证明范本
2014/09/14 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js