ajax无刷新获取天气信息

最新推荐文章于 2022-08-11 19:33:29 发布

转载最新推荐文章于 2022-08-11 19:33:29 发布 · 266 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/e0yu/p/6905333.html

文章标签：

#php #xhtml #javascript #ViewUI

本文介绍如何使用PHP代理和AJAX请求跨域获取天气信息，包括原生JS、jQuery实现方式，并提供了国家气象局开放的天气预报接口及其城市代码。

浏览器由于安全方面的问题，禁止ajax跨域请求其他网站的数据，但是可以再本地的服务器上获取其他服务器的信息，在通过ajax请求本地服务来实现：

<?php  
header("content-type:text/html;charset=utf-8");  
//php代理获取天气信息  
//跨域请求  
//天气预报接口  
$url = "http://www.weather.com.cn/data/sk/101010100.html";  
$cont = file_get_contents($url);  
echo $cont;  
?>

使用原生JS来实现：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"  >  
<head>  
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>  
    <title>ajax</title>  
    <style type="text/css">  
    </style>  
    <script type="text/javascript">  
        function getWeather(){  
                var xhr = new XMLHttpRequest();  
                var s = "";  
                xhr.onreadystatechange = function(){  
                    if(xhr.readyState==4){  
                        alert(xhr.responseText);  
                        eval("var info="+xhr.responseText);  
                        s += "城市："+info.weatherinfo.city+" ";   
                        s += "温度："+info.weatherinfo.temp+" ";   
                        s += "风向："+info.weatherinfo.WD+" ";   
                        s += "风力："+info.weatherinfo.WS;   
                    }  
                    document.getElementById("weather").innerHTML = s;  
                }  
                xhr.open('get','./weather.php');  
  
                xhr.send(null);  
                //阻止浏览器默认动作 跳转  
                return false;  
    }  
    </script>  
</head>  
<body>  
<h2>ajax无刷新获取天气信息</h2>  
    <input type="submit" value="获取天气" onclick="getWeather()"></input>  
    <div id="weather"></div>  
    <hr/>  
    <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>  
</body>     
</html>

使用jq的ajax来实现：

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>标题</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<div class='div'></div>
<input type='button' class='submit' value='提交' />
<script type='text/javascript' src='jquery-1.8.3.min.js'></script>
<script type='text/javascript'>
$('input.submit').click(function(){
    $.ajax({
        url:"weather.php",
        async:true,
        success:function(result){
            eval("var info="+result); 
            console.log(info['weatherinfo']['city']);
        }
    });
});
</script>
</body>
</html>

获取天气预报的信息：开源免费天气预报接口API以及全国所有地区代码！！（国家气象局提供）

国家气象局提供的天气预报接口

接口地址：

http://www.weather.com.cn/data/sk/101010100.html

http://www.weather.com.cn/data/cityinfo/101010100.html

http://m.weather.com.cn/data/101010100.html

对于第三个接口，返回信息比较全面，也是以json格式提供，格式如下

{"weatherinfo": {

//基本信息;

"city":"北京","city_en":"beijing",

"date_y":"2012年2月16日","date":"", "week":"星期四","fchh":"11", "cityid":"101010100",

//摄氏温度

"temp1":"2℃~-7℃",

"temp2":"1℃~-7℃",

"temp3":"4℃~-7℃",

"temp4":"7℃~-5℃",

"temp5":"5℃~-3℃",

"temp6":"5℃~-2℃",

//华氏温度;

"tempF1":"35.6℉~19.4℉",

"tempF2":"33.8℉~19.4℉",

"tempF3":"39.2℉~19.4℉",

"tempF4":"44.6℉~23℉",

"tempF5":"41℉~26.6℉",

"tempF6":"41℉~28.4℉",

//天气描述;

"weather1":"晴",

"weather2":"晴",

"weather3":"晴",

"weather4":"晴转多云",

"weather5":"多云",

"weather6":"多云转阴",

//天气描述图片序号

"img1":"0",

"img2":"99",

"img3":"0",

"img4":"99",

"img5":"0",

"img6":"99",

"img7":"0",

"img8":"1",

"img9":"1",

"img10":"99",

"img11":"1",

"img12":"2",

"img_single":"0",

//图片名称;

"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":"晴",

//风速描述

"wind1":"北风3-4级转微风",

"wind2":"微风",

"wind3":"微风",

"wind4":"微风",

"wind5":"微风",

"wind6":"微风",

//风速级别描述

"fx1":"北风",

"fx2":"微风",

"fl1":"3-4级转小于3级",

"fl2":"小于3级",

"fl3":"小于3级",

"fl4":"小于3级",

"fl5":"小于3级",

"fl6":"小于3级",

//今天穿衣指数;

"index":"冷",

"index_d":"天气冷，建议着棉衣、皮夹克加羊毛衫等冬季服装。年老体弱者宜着厚棉衣或冬大衣。",

//48小时穿衣指数

"index48":"冷",

"index48_d":"天气冷，建议着棉衣、皮夹克加羊毛衫等冬季服装。年老体弱者宜着厚棉衣或冬大衣。",

//紫外线及48小时紫外线

"index_uv":"弱",

"index48_uv":"弱",

//洗车

"index_xc":"适宜",

//旅游

"index_tr":"一般",

//舒适指数

"index_co":"较不舒适",

"st1":"1",

"st2":"-8",

"st3":"2",

"st4":"-4",

"st5":"5",

"st6":"-5",

//晨练

"index_cl":"较不宜",

//晾晒

"index_ls":"基本适宜",

//过敏

"index_ag":"极不易发"}}

全国各城市代码如下：

北京:101010100朝阳:101010300顺义:101010400怀柔:101010500通州:101010600昌平:101010700延庆:101010800丰台:101010900石景山:101011000大兴:101011100房山:101011200密云:101011300门头沟:101011400平谷:101011500八达岭:101011600佛爷顶:101011700汤河口:101011800密云上甸子:101011900斋堂:101012000霞云岭:101012100北京城区:101012200海淀:101010200天津:101030100宝坻:101030300东丽:101030400西青:101030500北辰:101030600蓟县:101031400汉沽:101030800静海:101030900津南:101031000塘沽:101031100大港:101031200武清:101030200宁河:101030700上海:101020100宝山:101020300嘉定:101020500南汇:101020600浦东:101021300青浦:101020800松江:101020900奉贤:101021000崇明:101021100徐家汇:101021200闵行:101020200金山:101020700石家庄:101090101张家口:101090301承德:101090402唐山:101090501秦皇岛:101091101沧州:101090701衡水:101090801邢台:101090901邯郸:101091001保定:101090201廊坊:101090601郑州:101180101新乡:101180301许昌:101180401平顶山:101180501信阳:101180601南阳:101180701开封:101180801洛阳:101180901商丘:101181001焦作:101181101鹤壁:101181201濮阳:101181301周口:101181401漯河:101181501驻马店:101181601三门峡:101181701济源:101181801安阳:101180201合肥:101220101芜湖:101220301淮南:101220401马鞍山:101220501安庆:101220601宿州:101220701阜阳:101220801亳州:101220901黄山:101221001滁州:101221101淮北:101221201铜陵:101221301宣城:101221401六安:101221501巢湖:101221601池州:101221701蚌埠:101220201杭州:101210101舟山:101211101湖州:101210201嘉兴:101210301金华:101210901绍兴:101210501台州:101210601温州:101210701丽水:101210801衢州:101211001宁波:101210401重庆:101040100合川:101040300南川:101040400江津:101040500万盛:101040600渝北:101040700北碚:101040800巴南:101040900长寿:101041000黔江:101041100万州天城:101041200万州龙宝:101041300涪陵:101041400开县:101041500城口:101041600云阳:101041700巫溪:101041800奉节:101041900巫山