PHP Ajax JavaScript Json获取天气信息实现代码
要在自己的网站上添加一个天气预报功能，是一个很普通的需求，实现起来也不是很难。今天来介绍几个简单的方法。
使用第三方服务
有这样的一种简单的方式，借助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获得客户端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+AJAX无刷新实现返回天气预报数据
用php来写一个天气预报的模块 天气数据是通过采集中国气象网站的.本来中国天气网站也给出了数据的API接口.以下是API的地址.返回的数据格式为json格式. 1. http://www.weather.com.cn/data/sk/101010100.html 2. http://www.weather.com.cn/data/cityinfo/101010100.html 3. http://m.weather.com.cn/data/101010100.html URL中的数字"10101
-
天枫AJAX天气预报系统V1.0
'----------------------------------------------------------------------'转发时请保留此声明信息,这段声明不并会影响你的速度!'******************* 天枫AJAX天气预报系统V1.0 ************************************'作者:天枫'网站:http://www.52515.net'电子邮件:chenshaobo@gmail.com'QQ:76994859'版权声明:版权所
-
配合AJAX天气预报的webService 之asp
因为发现AJAX目前跨域有点问题,只能在IE里面设置才可以使用,所以自己就写了个简单ASP的webService,其实作用就是一个小偷程序,把雅虎的天气抓了过来,然后生成XML.先从这里开始吧,以后会考虑添加数据库,这样客户端写好后读取速度就很快了. 习惯了用JS写东西,一不小心ASP也全拿JS写的,呵呵,有时间再改成VB. 我再鄙视他一下,FLASH是N年前就搞过的,时间虽然丢的有点长了,但是在AW的帮助,慢慢就会有所起色. 总算平息了火,还算是又默默改变了一件事情. 复制代码 代码如下: <
-
AJAX集天气\IP\多国语言翻译MP3(可同步LRC歌词显示)\万年历查询通
'转发时请保留此声明信息,这段声明不并会影响你的速度! '****天枫AJAX集天气\IP\多国语言翻译MP3(可同步LRC歌词显示)\万年历查询通******** '作者:天枫 '网站:http://www.52515.net '电子邮件:chenshaobo@gmail.com 'WEB开发群:4635188 19182747 'QQ:76994859 '版权声明:版权所有,源代码公开,各种用途均可免费使用,但是修改后必须把修改后的文件 '发送一份给作者.并且保留作者此版权信息 '*****
-
Ajax 通过城市名获取数据(全国天气预报API)
预览图(比较简单粗糙) 聚合数据全国天气预报接口:https://www.juhe.cn/docs/api/id/39 接口地址:http://v.juhe.cn/weather/index 支持格式:json/xml 请求方式:get 请求示例:http://v.juhe.cn/weather/index?format=2&cityname=%E8%8B%8F%E5%B7%9E&key=您申请的KEY 调用样例及调试工具:API测试工具 请求参数说明: 名称 类型 必填 说明 cityn
-
ajax获取用户所在地天气的方法
使用ajax获取用户所在地的天气,供大家参考,具体内容如下 1.要获取用户归属地的天气,首先得获取用户所在的市区,这里先获取用户的IP,通过IP获取IP的归属地,从而得到用户地址. 2.因为阿里云提供了通过城市名(city)或者城市编号(cityId) 即可获取天气的API,从而获取用户归属地天气 var city1; $.ajax({ //获取客户端 IP 和 归属地 url: "http://chaxun.1616.net/s.php?type=ip&output=json"
-
JS HTML5 音乐天气播放器(Ajax获取天气信息)
晚上要考软件工程,实在不想复习.写个播放器吧,这个只是个用来学习的小Demo,众多不完善之处,下面贴出源代码,如果要转载,请加上版权声明 PS:因为Ajax涉及到跨域获取天气信息,有两个版本,一个是直接跨域,IE10支持,其他的浏览器要改配置.另一个是服务器端的weather.php,获取天气信息返回json. weather.php就不写了,里面的对应路径存放对应的文件 演示地址: http://569375.ichengyun.net/fm/ 实现功能:音乐播放,进度调节(滑动模块),音量条
-
AJAX天气预报前台
直接配合前面的后台程序,就可以实现跨域抓取天气信息了. 目前已完美支持firefox了 复制代码 代码如下: <!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&qu
-
PHP Ajax JavaScript Json获取天气信息实现代码
要在自己的网站上添加一个天气预报功能,是一个很普通的需求,实现起来也不是很难.今天来介绍几个简单的方法. 使用第三方服务 有这样的一种简单的方式,借助http://www.tianqi.com/plugin/网上的天气服务,可以定制我们的显示形状,实现添加天气预报的功能. 下面给出一个简单的小例子: 复制代码 代码如下: <iframe width="420" scrolling="no" height="60" frameborder=&
-
android通过google api获取天气信息示例
android通过google API获取天气信息 复制代码 代码如下: public class WeatherActivity extends Activity { private TextView txCity; private Button btnSearch; private Handler weatherhandler; private Dialog progressDialog; private Timer timer; /** Called when the activit
-
原生ajax处理json格式数据的实例代码
原生ajax处理json格式数据代码实例: 由于jQuery的出现,原生ajax使用频率也越来越少,这当然是因为jQuery的便利性多导致的. 但是对于原生ajax实现原理的知晓也是非常重要的,下面就改造本板块的一个使用jquery ajax实现的代码. 代码实例如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo
-
微信公众号开发之获取位置信息php代码
本文实例为大家分享了php微信公众号获取位置信息的具体代码,供大家参考,具体内容如下 <?php /** * wechat php test */ //define your token define("TOKEN", "weixin"); $wechatObj = new wechatCallbackapiTest(); //$wechatObj->valid(); $wechatObj->responseMsg(); class wechatC
-
易语言通过读取文件获取WIFI信息的代码
常量数据表 .版本 2 .常量 常量_临时目录, "<文本长度: 28>", , c:\users\public\tmp_wifipath 本地WIFI密码配置读取的代码 此功能需要加载精易模块5.6 .版本 2 .支持库 iext .支持库 eAPI .程序集 窗口程序集_启动窗口 .子程序 遍历文件 .如果 (文件是否存在 (#常量_临时目录)) 文件_枚举1 (#常量_临时目录, "*.xml", &S_遍历WIFI文件) .否则 信息框
-
纯批处理获取硬件信息的代码
先声明:我私下会不断的更新代码,只有大幅度更新才会上传到这里(目前核心代码基本完善)! 兼容XP Win7 Win8 win10 本程序特性: 1.运行环境判断,若自身被修改则自动闪退:若PE环境则提示并指引退出:若虚拟机环境则提示信息获取可能不准:若非管理员权限也会截取并提示. 2.关于硬盘.内存容量的计算方面支持 字节 KB MB GB TB PB 3.由于有些电脑多网卡.显卡.声卡,此程序只获取正在使用的相关信息 4.硬盘温度,使用时间,通电次数纯批处理实现!(原创代码,转载请注明出处!)
-
ajax与json 获取数据并在前台使用简单实例
用ajax获取后台数据,返回json数据,怎么在前台使用呢? 后台 if (dataType == "SearchCustomer") { int ID; if (Int32.TryParse(CustomerID, out ID)) { string s = GridComputer.GridCustomer.getCustomer(1, 1, ID); if (s == null) { context.Response.ContentType = "text/plain&
-
JSON获取属性值方法代码实例
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等). 这些特性使JSON成为理想的数据交换语言.其属性值的获取有
-
javascript[js]获取url参数的代码
最近做个页面,需要用javascript获取url参数,可发现网上的东西,实在是多了,错误也实在是多啊,真晕,浪费了我不少时间于是,我便总结一下,一个好用的就可以了,先声明下,用正则,是简单,但多浏览器的兼容性,和速度不敢保证了,所以我就用个多浏览器兼容的 复制代码 代码如下: <script language = javascript> function request(paras){ var url = location.href; var paraString = url.substr