用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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
vue插槽slot的理解和使用方法
Apr 03 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 Javascript
Vue+Element-U实现分页显示效果
Nov 15 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
第1次亲密接触PHP5(1)
2006/10/09 PHP
一个捕获函数输出的函数
2007/02/14 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
javascript 表单验证常见正则
2009/09/28 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
js简易版购物车功能
2017/06/17 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
Python模拟登录12306的方法
2014/12/30 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
Python 存取npy格式数据实例
2020/07/01 Python
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
.NET程序员的数据库面试题
2012/10/10 面试题
一封普通求职者的求职信
2013/11/20 职场文书
二年级体育教学反思
2014/01/15 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android