ajax无刷新获取天气信息
浏览器由于安全方面的问题，禁止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巫山:101042000潼南:101042100垫江:101042200梁平:101042300忠县:101042400石柱:101042500大足:101042600荣昌:101042700铜梁:101042800璧山:101042900丰都:101043000武隆:101043100彭水:101043200綦江:101043300酉阳:101043400秀山:101043600沙坪坝:101043700永川:101040200福州:101230101泉州:101230501漳州:101230601龙岩:101230701晋江:101230509南平:101230901厦门:101230201宁德:101230301莆田:101230401三明:101230801兰州:101160101平凉:101160301庆阳:101160401武威:101160501金昌:101160601嘉峪关:101161401酒泉:101160801天水:101160901武都:101161001临夏:101161101合作:101161201白银:101161301定西:101160201张掖:101160701广州:101280101惠州:101280301梅州:101280401汕头:101280501深圳:101280601珠海:101280701佛山:101280800肇庆:101280901湛江:101281001江门:101281101河源:101281201清远:101281301云浮:101281401潮州:101281501东莞:101281601中山:101281701阳江:101281801揭阳:101281901茂名:101282001汕尾:101282101韶关:101280201南宁:101300101柳州:101300301来宾:101300401桂林:101300501梧州:101300601防城港:101301401贵港:101300801玉林:101300901百色:101301001钦州:101301101河池:101301201北海:101301301崇左:101300201贺州:101300701贵阳:101260101安顺:101260301都匀:101260401兴义:101260906铜仁:101260601毕节:101260701六盘水:101260801遵义:101260201凯里:101260501昆明:101290101红河:101290301文山:101290601玉溪:101290701楚雄:101290801普洱:101290901昭通:101291001临沧:101291101怒江:101291201香格里拉:101291301丽江:101291401德宏:101291501景洪:101291601大理:101290201曲靖:101290401保山:101290501呼和浩特:101080101乌海:101080301集宁:101080401通辽:101080501阿拉善左旗:101081201鄂尔多斯:101080701临河:101080801锡林浩特:101080901呼伦贝尔:101081000乌兰浩特:101081101包头:101080201赤峰:101080601南昌:101240101上饶:101240301抚州:101240401宜春:101240501鹰潭:101241101赣州:101240701景德镇:101240801萍乡:101240901新余:101241001九江:101240201吉安:101240601武汉:101200101黄冈:101200501荆州:101200801宜昌:101200901恩施:101201001十堰:101201101神农架:101201201随州:101201301荆门:101201401天门:101201501仙桃:101201601潜江:101201701襄樊:101200201鄂州:101200301孝感:101200401黄石:101200601咸宁:101200701成都:101270101自贡:101270301绵阳:101270401南充:101270501达州:101270601遂宁:101270701广安:101270801巴中:101270901泸州:101271001宜宾:101271101内江:101271201资阳:101271301乐山:101271401眉山:101271501凉山:101271601雅安:101271701甘孜:101271801阿坝:101271901德阳:101272001广元:101272101攀枝花:101270201银川:101170101中卫:101170501固原:101170401石嘴山:101170201吴忠:101170301西宁:101150101黄南:101150301海北:101150801果洛:101150501玉树:101150601海西:101150701海东:101150201海南:101150401济南:101120101潍坊:101120601临沂:101120901菏泽:101121001滨州:101121101东营:101121201威海:101121301枣庄:101121401日照:101121501莱芜:101121601聊城:101121701青岛:101120201淄博:101120301德州:101120401烟台:101120501济宁:101120701泰安:101120801西安:101110101延安:101110300榆林:101110401铜川:101111001商洛:101110601安康:101110701汉中:101110801宝鸡:101110901咸阳:101110200渭南:101110501太原:101100101临汾:101100701运城:101100801朔州:101100901忻州:101101001长治:101100501大同:101100201阳泉:101100301晋中:101100401晋城:101100601吕梁:101101100乌鲁木齐:101130101石河子:101130301昌吉:101130401吐鲁番:101130501库尔勒:101130601阿拉尔:101130701阿克苏:101130801喀什:101130901伊宁:101131001塔城:101131101哈密:101131201和田:101131301阿勒泰:101131401阿图什:101131501博乐:101131601克拉玛依:101130201拉萨:101140101山南:101140301阿里:101140701昌都:101140501那曲:101140601日喀则:101140201林芝:101140401台北县:101340101高雄:101340201台中:101340401海口:101310101三亚:101310201东方:101310202临高:101310203澄迈:101310204儋州:101310205昌江:101310206白沙:101310207琼中:101310208定安:101310209屯昌:101310210琼海:101310211文昌:101310212保亭:101310214万宁:101310215陵水:101310216西沙:101310217南沙岛:101310220乐东:101310221五指山:101310222琼山:101310102长沙:101250101株洲:101250301衡阳:101250401郴州:101250501常德:101250601益阳:101250700娄底:101250801邵阳:101250901岳阳:101251001张家界:101251101怀化:101251201黔阳:101251301永州:101251401吉首:101251501湘潭:101250201南京:101190101镇江:101190301苏州:101190401南通:101190501扬州:101190601宿迁:101191301徐州:101190801淮安:101190901连云港:101191001常州:101191101泰州:101191201无锡:101190201盐城:101190701哈尔滨:101050101牡丹江:101050301佳木斯:101050401绥化:101050501黑河:101050601双鸭山:101051301伊春:101050801大庆:101050901七台河:101051002鸡西:101051101鹤岗:101051201齐齐哈尔:101050201大兴安岭:101050701长春:101060101延吉:101060301四平:101060401白山:101060901白城:101060601辽源:101060701松原:101060801吉林:101060201通化:101060501沈阳:101070101鞍山:101070301抚顺:101070401本溪:101070501丹东:101070601葫芦岛:101071401营口:101070801阜新:101070901辽阳:101071001铁岭:101071101朝阳:101071201盘锦:101071301大连:101070201锦州:101070701
另外，一些其他的接口：
webservice工厂接口 http://www.36wu.com
快递查询接口http://webservice.36wu.com/ExpressService.asmx
ip查询接口http://webservice.36wu.com/ipService.asmx
天气预报接口http://webservice.36wu.com/weatherService.asmx
身份证查询接口http://webservice.36wu.com/IdCardService.asmx
手机归属地接口http://webservice.36wu.com/MobilePhoneService.asmx
翻译接口http://webservice.36wu.com/TranslationService.asmx
火车时刻接口http://webservice.36wu.com/TrainService.asmx
股票查询接口http://webservice.36wu.com/StockService.asmx
邮编接口http://webservice.36wu.com/ZipcodeService.asmx
二维码Web服务http://webservice.36wu.com/DimensionalCodeService.asmx
公交查询Web服务http://webservice.36wu.com/mapService.asmx
ISBN查询Web服务http://webservice.36wu.com/ISBNService.asmx
ICP备案查询Web服务http://webservice.36wu.com/ICPServic.asmx
ajax无刷新获取天气信息的更多相关文章
- ajax无刷新获取php后台数据
$.ajax({ url:"result.php", //data:{"page":i}, dataType:"json", beforeS ...
- ajax+FormData+javascript实现无刷新表单信息提交
ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息 ,实例化表单数据对象 同时收集fm的表单域信息. var f ...
- PHP Ajax JavaScript Json 实现天气信息获取
使用第三方服务 间接方式 思路 使用到的服务 实现代码 前端完整代码 总结 要在自己的网站上添加一个天气预报功能,是一个很普通的需求,实现起来也不是很难.今天来介绍几个简单的方法. 使用第三方服务 有 ...
- Thinkphp框架 -- ajax无刷新上传图片
用Thinkphp框架做无刷新上传图片 视图层 View <!doctype html> <html lang="en"> <head> < ...
- thinkphp下实现ajax无刷新分页
1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- 内网公告牌获取天气信息解决方案(C# WebForm)
需求:内网公告牌能够正确显示未来三天的天气信息 本文关键字:C#/WebForm/Web定时任务/Ajax跨域 规划: 1.天定时读取百度接口获取天气信息并存储至Txt文档: 2.示牌开启时请求Web ...
- Ajax无刷新提交
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ajax 无刷新分页
//ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...
随机推荐
- proto序列化
proto序列化和反序列化类 序列化是将我们的Protobuf类对象转换成字节数组的方法,网络底层我们从服务器获取到的是字节数组,反序列化是将字节转成proto类对象的方法 public class ...
- 元素随屏幕滚动到顶部固定js效果
网站中常见这种效果,某个广告或详情页切换tab,当屏幕向下移动时,该元素会停留在浏览器最顶部,下面ecshop模板中心教您实现js代码: 案例图: 1.首先在页面上找到该元素 加上 id =&quo ...
- Blender 移动、旋转、缩放
1.手动调整物体的属性 当我们添加了一个物体后,例如一个Torus物体. 在左侧下角部分能看到“Add Torus”面板,面板包含了Locatin.Rotation.Major Segments.Mi ...
- Oracle批量执行SQL语句
SQLServer的场合,用";"分割SQL语句即可正常执行. Oracle的场合,会报ORA-00911错误.Oracle中需要加上begin end才正确. Dim Sql A ...
- MyBatis入门程序之表关联
一.一对一查询(ResultType比较简单,只需要指向扩展的类:ResultMap逐个匹配比较麻烦,可以配置属性autoMapping="true",还可以可以实现延迟加载) 1 ...
- MFC之自绘控件
在描绘MFC界面时,MFC自带的控件样式是绝对不满足界面的需求的. 所以我们就要在MFC自带控件基础上对控件样式进行重绘. 在采用自绘前界面样式 采用自绘后界面样式 是不是自绘控件后看起来正常了很多? ...
- Explaining Delegates in C# - Part 7 (Asynchronous Callback - Way 4)
This is the final part of the series that started with... Callback and Multicast delegatesOne more E ...
- 使用 requests 配置代理服务
(1) 如果我们一直用同一个IP去请求同一个网站上的网页,久了之后可能会被该网站服务器屏蔽,因此我们可以使用代理IP来发起请求,代理实际上指的就是代理服务器(2) 当我们使用代理IP发起请求时,服务器 ...
- CMD打开模拟器
CMD-> CD d:\android\android-sdk-151\tools-> (这里的路径是你emulator.exe所在的路径) emulator -avd avdname-& ...
- JavaWeb学习总结（十五）Jsp中提交的表单的get和post的两种方式
两者的比较: Get方式: 将请求的参数名和值转换成字符串,并附加在原来的URL之后,不安全 传输的数据量较小,一般不能大于2KB: post方式: 数量较大: 请求的参数和值放在HTML的请求头中, ...