PHP Ajax JavaScript Json获取天气信息实现代码_php实例

要在自己的网站上添加一个天气预报功能，是一个很普通的需求，实现起来也不是很难。今天来介绍几个简单的方法。

使用第三方服务

有这样的一种简单的方式，借助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获取天气信息
ajax天气信息获取
javascript ajax json、javascript ajax实例、jquery ajax json实例、java ajax json 实例、ajax请求json数据实例，以便于您获取更多的相关知识。

时间： 2024-11-01 10:41:08

PHP Ajax JavaScript Json获取天气信息实现代码_php实例的相关文章

PHP Ajax JavaScript Json获取天气信息实现代码

要在自己的网站上添加一个天气预报功能,是一个很普通的需求,实现起来也不是很难.今天来介绍几个简单的方法. 使用第三方服务 有这样的一种简单的方式,借助http://www.tianqi.com/plugin/网上的天气服务,可以定制我们的显示形状,实现添加天气预报的功能. 下面给出一个简单的小例子: 复制代码 代码如下:<iframe width="420" scrolling="no" height="60" frameborder=&q

PHP Ajax JavaScript Json 实现天气信息获取

使用第三方服务 间接方式 思路 使用到的服务 实现代码 前端完整代码 总结 要在自己的网站上添加一个天气预报功能,是一个很普通的需求,实现起来也不是很难.今天来介绍几个简单的方法. 使用第三方服务 有这样的一种简单的方式,借助http://www.tianqi.com/plugin/网上的天气服务,可以定制我们的显示形状,实现添加天气预报的功能. 下面给出一个简单的小例子: <iframe width="420" scrolling="no" height=&

php实现的百度搜索某地天气的小偷代码_php实例

例子,php百度天气小偷程序. 复制代码 代码如下: <?php//获取在百度里面搜索 xx(地名)天气 抓取的天气信息$url = "http://www.baidu.com/s?wd=%B1%B1%BE%A9%CC%EC%C6%F8"; //此为在百度里搜 北京天气 的返回地址$content = file_get_contents($url);preg_match_all('/<div id="weat">(.+?)<\/table&g

php获取地址栏信息的代码_php技巧

复制代码 代码如下: <?php //获取域名或主机地址 echo $_SERVER['HTTP_HOST']."<br>"; //获取网页地址 echo $_SERVER['PHP_SELF']."<br>"; //获取网址参数 echo $_SERVER["QUERY_STRING"]."<br>"; //来源网页的详细地址 echo $_SERVER['HTTP_REFERER'

PHP Cookei记录用户历史浏览信息的代码_php实例

[基础] Cookie常用方法: $_COOKIE['RecordLuHuiDUDU'] 得到Cookie setcookie('RecordLuHuiDUDU',",time()-3600*24*30); setcookie(字段名,数据,过期时间); 设置Cookie [注意] 重新设置Cookie需要使之前的Cookie失效,删除Cookie也是同样的方法: setcookie('RecordLuHuiDUDU',",time()-3600*24*30); [代码示例] /**

基于Snoopy的PHP近似完美获取网站编码的代码_php实例

先要到网上下载Snoopy.class.php 调用方法: 复制代码 代码如下: <?php require 'lib/Snoopy.class.php'; require 'lib/WebCrawl.class.php';//包含下面代码 $go=new WebCrawl('http://www.baidu.com'); echo $go->getCharset(); ?> 复制代码 代码如下: <?php class WebCrawl { private $url; priva

android通过google api获取天气信息示例_Android

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

Android——使用Volley+fastJson在新线程中读取网络接口获取天气信息

一,关于Volley            其实最初对于网络数据的访问,我是没想到要用框架的,使用HttpURLConnection或者HttpGet or HttpPost都可以实现.但是why? why I have to use Volley?        Before Volley:                class HttpURLConnection_post extends Thread{ @Override public void run() { //设置请求的路径 St

获取天气信息调哪个API稳定并免费

问题描述 如题获取天气信息调哪个API稳定并免费最好能返回图片的,呈现出来比较形象,这个很很重要有没有做过这方面开发的大神,求教 解决方案 解决方案二: 解决方案三:这个不是免费的啊,只能测试使用5天解决方案四:引用1楼guwei4037的回复:这个不是免费的啊,只能测试使用5天解决方案五:免费的午餐没营养解决方案六:http://apistore.baidu.com/希望能帮到你解决方案七:weather.com或者tianqi.com都不错