用javascript为页面添加天气显示实现思路及代码


Posted in Javascript onDecember 02, 2013
<%@ page language="java" pageEncoding="UTF-8"%> 
<html> 
<head> 
<script> 
function load(cid) 
{ 
var xmlhttp; 
if (window.XMLHttpRequest) 
{// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp=new XMLHttpRequest(); 
} 
else 
{// code for IE6, IE5 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
xmlhttp.open("GET","date.jsp?cid="+cid,false); 
xmlhttp.send(); 
var obj = eval("("+ xmlhttp.responseText+")"); 
//var obj=JSON.parse(xmlhttp.responseText); //IE8以上 
document.getElementById("test").innerHTML=obj.weatherinfo.city+":"+obj.weatherinfo.weather1+" "+obj.weatherinfo.temp1; 
} 
</script> 
</head> 
<body> 
<p id="test">天气情况</p> 
<button id="btn1" onClick=load("101280601")>深圳天气</button> 
<button id="btn2" onClick=load("101250501")>郴州天气</button> 
<!-- 
城市id获取:http://blog.csdn.net/zgyulongfei/article/details/7956118 
--> 
</body> 
</html>

date.jsp
<%@ page language="java" import="java.net.*,java.io.*" pageEncoding="utf-8"%> 
<% 
String cid = request.getParameter("cid"); 
URL url = new URL("http://m.weather.com.cn/data/"+cid+".html"); 
HttpURLConnection httpConn = (HttpURLConnection) url.openConnection(); 
httpConn.connect(); 
InputStream cin = httpConn.getInputStream(); 
BufferedReader reader = new BufferedReader(new InputStreamReader(cin,"UTF-8")); 
StringBuffer sb = new StringBuffer(); 
String rl = null; 
while ((rl = reader.readLine()) != null) 
sb.append(rl); 
out.println(sb); 
%>
Javascript 相关文章推荐
JavaScript CSS修改学习第三章 修改样式表
Feb 19 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
js创建对象的方式总结
Jan 10 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
微信小程序纯文本实现@功能
Apr 08 Javascript
给ListBox添加双击事件示例代码
Dec 02 #Javascript
js抽奖实现随机抽奖代码效果
Dec 02 #Javascript
javascript模拟地球旋转效果代码实例
Dec 02 #Javascript
js实现全屏漂浮广告移入光标停止移动
Dec 02 #Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 #Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 #Javascript
关于js中for in的缺陷浅析
Dec 02 #Javascript
You might like
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
php中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
Python发送Email方法实例
2014/08/21 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
python 导入数据及作图的实现
2019/12/03 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
Araks官网:纽约内衣品牌
2020/10/15 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
企事业单位求职者的自我评价
2013/12/28 职场文书
优质服务活动实施方案
2014/05/02 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python