用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来实现动画导航效果的代码
Dec 16 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
js异常捕获方法介绍
Apr 10 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 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中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
PHP6新特性分析
2016/03/03 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
tensorflow自定义激活函数实例
2020/02/04 Python
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
逃课上网检讨书
2014/02/20 职场文书
农行心得体会
2014/09/02 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
2014年学生会工作总结
2014/11/07 职场文书
营销计划书
2015/01/17 职场文书
单位证明范文
2015/06/18 职场文书
上班旷工检讨书
2015/08/15 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python