1、后台
<?php
if(isset($_GET['city']) && $_GET['city']!='')
{
$url='http://m.weather.com.cn/data/';
$city=(int)$_GET['city'];
$json = file_get_contents($url . $city .'.html');
echo $json;
exit;
}
获取http://m.weather.com.cn/data/的天气数据,返回的是json格式数据。
2、前台
返回的json数据:
weatherinfo:
{
city: "杭州"
city_en: "hangzhou"
cityid: "101210101"
date: ""
date_y: "2012年8月12日"
fchh: "18"
fl1: "小于3级"
fl2: "小于3级"
fl3: "小于3级"
fl4: "小于3级"
fl5: "小于3级"
fl6: "小于3级"
fx1: "微风"
fx2: "微风"
img1: "1"
img2: "4"
img3: "1"
img4: "99"
img5: "1"
img6: "4"
img7: "0"
img8: "1"
img9: "0"
img10: "1"
img11: "1"
img12: "99"
img_single: "4"
img_title1: "多云"
img_title2: "雷阵雨"
img_title3: "多云"
img_title4: "多云"
img_title5: "多云"
img_title6: "雷阵雨"
img_title7: "晴"
img_title8: "多云"
img_title9: "晴"
img_title10: "多云"
img_title11: "多云"
img_title12: "多云"
img_title_single: "雷阵雨"
index: "炎热"
index48: "炎热"
index48_d: "天气炎热,建议着短衫、短裙、短裤、薄型T恤衫、敞领短袖棉衫等清凉夏季服装。"
index48_uv: "中等"
index_ag: "较易发"
index_cl: "较不宜"
index_co: "很不舒适"
index_d: "天气炎热,建议着短衫、短裙、短裤、薄型T恤衫、敞领短袖棉衫等清凉夏季服装。"
index_ls: "不宜"
index_tr: "一般"
index_uv: "中等"
index_xc: "不宜"
st1: "34"
st2: "26"
st3: "36"
st4: "26"
st5: "33"
st6: "27"
temp1: "26℃~35℃"
temp2: "27℃~35℃"
temp3: "27℃~35℃"
temp4: "28℃~35℃"
temp5: "28℃~36℃"
temp6: "28℃~35℃"
tempF1: "78.8?~95?"
tempF2: "80.6?~95?"
tempF3: "80.6?~95?"
tempF4: "82.4?~95?"
tempF5: "82.4?~96.8?"
tempF6: "82.4?~95?"
weather1: "多云转雷阵雨"
weather2: "多云"
weather3: "多云转雷阵雨"
weather4: "晴转多云"
weather5: "晴转多云"
weather6: "多云"
week: "星期日"
wind1: "微风"
wind2: "微风"
wind3: "微风"
wind4: "微风"
wind5: "微风"
wind6: "微风"
}
例子
<!DOCTYPE html>
<meta charset="utf-8" />
<title>weather API</title>
<style type="text/css">
*
{
padding:0;margin: 0;font-family: 微软雅黑;
}
div
{
clear:both;
}
li
{
list-style: none;
margin-right: 20px;
line-height: 24px;
float:left;
width: 300px;
text-align: center;
}
li span
{
margin-right: 10px;
}
</style>
<script type="text/javascript" src="../public/jQuery.js"></script>
<script type="text/javascript">
$(function()
{
var $div_1=$('#div-1');
var $div_2=$('#div-2');
var $btn=$('input:button');
$btn.click(function()
{
$(this).fadeOut(100);
get_weather();
});
function get_weather()
{
$.ajax(
{
url:'_weather.php',
data:{city:101210101},//杭州
type:'get',
dataType:'json',
beforeSend:function()
{
$div_2.html('正在获取杭州天气<span>.</span>');
var str='.,..,...,....,.....,......';
var a=str.split(',');
var i=0;
_t=setInterval(function()
{
i++;
i=(i>5)?0:i;
$div_2.find('span').html(a[i]);
},300);
},
success:function(json)
{
var w=json.weatherinfo;
html_1='';
var a=[];
a[0]='今日天气';
a[1]='明日天气';
a[2]='后日天气';
for(var i=0;i<=2;i++)
{
m=i*2+1;
n=i*2+2;
html_1+='<li><strong>'+a[i]+':</strong><br/>';
for(j=m;j<=n;j++)
{
html_1+='<span><img class="img-'+j+'" src="http://m.weather.com.cn/img/b'
+eval("w.img"+j)+'.gif" alt="'
+eval("w.img_title"+j)+'" title="'
+eval("w.img_title"+j)+'" />'
+'</span>';
}
html_1+='<br/>';
for(j=m;j<=n;j++)
{
html_1+='<span>'+eval("w.weather"+j)+'</span>';
}
html_1+='</li>';
}
$div_1.html(html_1);
clearInterval(_t);
$div_2.html('天气数据获取完成!');
},
error:function()
{
clearInterval(_t);
$div_2.html('获取天气失败!');
$btn.fadeIn(100);
}
});
}
get_weather();
});
</script>
<h1>获取杭州天气(来源:m.weather.com.cn)</h1>
<input type="button" value="重新获取天气数据" style="display:none;">
<div id="div-1"></div>
<div id="div-2"></div>