用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 相关文章推荐
js 浮动层菜单收藏
Jan 16 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
JavaScript实现简单的音乐播放器
Aug 14 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计划任务、定时执行任务的实现代码
2011/04/23 PHP
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
jQuery事件对象总结
2016/10/17 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
简洁的十分钟Python入门教程
2015/04/03 Python
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
python制作填词游戏步骤详解
2019/05/05 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
tensorflow 实现数据类型转换
2020/02/17 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
如何利用python进行时间序列分析
2020/08/04 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
程序员岗位职责
2013/11/11 职场文书
重阳节活动总结
2014/08/27 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python