用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 相关文章推荐
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
Node.js实现批量下载图片简单操作示例
Jan 18 Javascript
JavaScript中的this妙用实例分析
May 09 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
php5.4传引用时报错问题分析
2016/01/22 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
python基础教程之缩进介绍
2014/08/29 Python
python处理二进制数据的方法
2015/06/03 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
Python 画出来六维图
2019/07/26 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
贷款担保申请书
2014/05/20 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
python3 字符串str和bytes相互转换
2022/03/23 Python
Go语言测试库testify使用学习
2022/07/23 Golang