PHP Ajax JavaScript Json获取天气信息实现代码
Laravel  /  管理员 发布于 4年前   957
要在自己的网站上添加一个天气预报功能,是一个很普通的需求,实现起来也不是很难。今天来介绍几个简单的方法。</p><p>
使用第三方服务
有这样的一种简单的方式,借助
http://www.tianqi.com/plugin/
网上的天气服务,可以定制我们的显示形状,实现添加天气预报的功能。</p><p>
下面给出一个简单的小例子:
代码如下:
<div id="code36381">
<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对应的城市编码调用天气接口,根据城市编码来获取天气信息客户端获得服务器返回的数据,并显示到页面上。
使用到的服务
下面列出我们用到的一句常用的接口<br> •ip转城市:”http://ip.taobao.com/service/getIpInfo.php?ip=XXX”<br>
•查看对应的城市的代码:http://blog.csdn.net/anbowing/article/details/21936293<br>
•访问天气接口,获取数据:”http://www.weather.com.cn/adat/sk/“.$city_id.”html”</p><p>
下面的是几个很好的接口网站。<br>
•天气API接口大全
实现代码
代码的实现,分为三步。照应我们之前的逻辑来写即可。<br>
•获取客户端ip对应的城市
<?php
header("Content-Type:text/json;");
// 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>
•再向服务器请求一下城市代码,传给天气接口即可。 <br></p><pre>
<?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><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 />
</body></html>
在自己的网站上添加一个天气预报功能,其实并不难。也许还有更为简单的方式,这里就算是一个抛砖引玉的过程吧。<br></p><p>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。</p>
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号