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

在你的网站上增加天气预报功能是一个普遍的需求，实现起来并不难。今天，我们将介绍一些简单的方法。

使用第三方服务

有这样一个简单的方法，借助http://www.tianqi.com/plugin/在线天气服务，我们可以自定义我们的显示形状，实现添加天气预报的功能。

这里有一个简单的例子：

复制代码如下： iframe width=' 420 ' scrolling=' no ' height=' 60 ' frame border=' 0 ' allowtranstranstransparency=' true ' src=' http:3358i.tianqi.com/index.php? c=codeid=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对应的城市

？phpheader(' Content-type : text/JSON；charset=utf-8 ')；//ajax自身的特性决定了它不能跨域请求，所以用php的代理模式实现了崩溃和请求//$ URL=' http://www . weather.com.cn/adat/sk/1010100 . html '；//1.获取文本内容信息；2获取URL/$ data=file _ get _ contents($ URL)对应的数据；//echo $数据；/////////////////////////////////Idea 1//IP-城市编码-天气信息//获取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/GetPinfo . PHP？ip=“.”$ client _ IP '；$ result=file _ get _ contents($ URL)；echo $结果；/////我们可以在客户端看到它

脚本函数getcity code(){ var xhr=new XMLHttpRequest()；xhr . onreadystatechange=function(){ if(xhr . readystate==4){//alert(xhr . responsetext)；eval(' var city code=' xhr . responsetext ')；alert(city code . data . city)；} } xhr.open('get '，'。/getcity id . 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 $天气；前端完整代码

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title获取天气信息/title脚本函数getinfo(){ var Ajax=new XMlhttprequest()；Ajax。onreadystatechange=function(){ if(Ajax。readystate==4){ alert(Ajax。response text)；eval(' var data=' Ajax。response text ')；警报（数据);document.getElementById('city ').innerHTML=数据。天气信息。城市；文件。getelementbyid(“城市id”).innerHTML=数据。天气信息。城市id；document.getElementById('temp ').innerHTML=数据。天气信息。温度；document.getElementById('WD ').innerHTML=数据。天气信息。wd；document.getElementById('WS ').innerHTML=数据。天气信息。ws；document.getElementById('SD ').innerHTML=数据。天气信息。SD；document.getElementById('time ').innerHTML=数据。天气信息。时间；} } ajax.open('get '，' ./getinfo。PHP’)；Ajax。发送(null)；}/脚本/标题dyh 3获取城市代码/H3按钮类型=' button ' onclick=' getcity code()'获取城市代码/button br/脚本函数getcity code(){ var xhr=new XMLHttpRequest()；xhr。onreadystatechange=function(){ if(xhr。readystate==4){//alert(xhr。response text)；eval(' var城市代码=' xhr。response text ')；警报(城市代码。数据。城市)；} } xhr.open('get '，' ./getcity id。PHP’)；xhr。发送(null)；}/scriptspan id='cityid'/spanh3点击按钮获取天气信息/H3按钮名称=' getinfo ' onclick=' getinfo()'获取/buttondivspan城市名称/spanspan id='city'/spanbr /span城市代码/span span id=' city id '/span br/span当前温度/spanspan id='temp'/spanbr /span风向/spanspan id='WD'/spanbr /span风速/spanspan id='WS'/spanbr /span湿度/spanspan id='SD'/spanbr /span更新时间/span span id=' time '/span br//div/body/html总结

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。