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来试下代理的功能。具体思路如下:

Created with Raphaël 2.1.0客户端打开我们的网页根据PHP获得客户端IP使用第三方服务获取该IP对应的城市编码调用天气接口,根据城市编码来获取天气信息客户端获得服务器返回的数据,并显示到页面上。

使用到的服务

下面列出我们用到的一句常用的接口

下面的是几个很好的接口网站。

实现代码

代码的实现,分为三步。照应我们之前的逻辑来写即可。

  • 获取客户端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>

总结

在自己的网站上添加一个天气预报功能,其实并不难。也许还有更为简单的方式,这里就算是一个抛砖引玉的过程吧。

目录
相关文章
|
1月前
|
前端开发
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
|
1月前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
1月前
|
数据采集 存储 数据挖掘
超越常规:用PHP抓取招聘信息
使用PHP和爬虫代理IP,自动化采集51job网站的招聘信息,关注公司、职位和待遇,数据存储为CSV,提升招聘效率,节省资源。示例代码展示如何设置代理、解析HTML并提取所需信息。此方法有利于人才市场情报获取和企业招聘策略制定。注意实际应用需考虑错误处理和适应网站结构变化。
超越常规:用PHP抓取招聘信息
|
1月前
|
JSON PHP 数据格式
|
25天前
|
JavaScript Java 测试技术
基于微信小程序的家政服务预约系统的+php+vue.js附带文章和源代码设计说明文档ppt
基于微信小程序的家政服务预约系统的+php+vue.js附带文章和源代码设计说明文档ppt
27 3
基于微信小程序的家政服务预约系统的+php+vue.js附带文章和源代码设计说明文档ppt
|
7天前
|
JSON PHP 数据格式
蓝易云 - PHP用CURL发送Content-type为application/json的POST请求方法
在这段代码中,我们首先创建了一个包含我们要发送的数据的数组,并使用 `json_encode`函数将其转换为JSON格式。然后,我们初始化了一个cURL会话,并设置了一些选项,包括POST请求方法、要发送的数据、返回结果和HTTP头部信息。最后,我们执行了cURL请求并关闭了会话。
14 2
|
11天前
|
存储 JSON JavaScript
JavaScript基础-对象与JSON
【6月更文挑战第11天】本文介绍了JavaScript对象的创建(字面量、构造函数、Class)与操作,包括属性访问和描述符。同时讲解了JSON的性质及其与JS对象的关系,以及序列化和解析过程。文章还列举了三个常见易错点(属性访问错误、JSON格式错误、循环引用)并提供了避免策略。通过代码示例展示如何操作对象和处理JSON,强调实践对于掌握这些概念的重要性。
|
1天前
|
XML JSON 前端开发
第十一篇JavaScript JSON与AJAX
第十一篇JavaScript JSON与AJAX
6 0
|
25天前
|
JavaScript Java 测试技术
基于微信小程序的社团活动助手php+vue.js附带文章和源代码设计说明文档ppt
基于微信小程序的社团活动助手php+vue.js附带文章和源代码设计说明文档ppt
19 1
|
9天前
|
PHP
PHP地方门户分类信息网站源码讯客分类信息系统源码(含手机版)
1.上传程序到网站根目录,访问http://域名/install/index.php 进行安装,不要直接打开网址,先直接安装; 2.安装完成后 后台恢复数据即可 默认帐号密码都是admin http://域名/admin/ 3.不要删除任何文件,因为删除文件或者修改代码可能造成错误
9 0