用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 跳转页面延迟2种方法
Mar 29 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 Javascript
jquery常用的12个小功能
Jul 22 Javascript
JavaScript实现分页效果
Mar 28 Javascript
详解原生JS动态添加和删除类
Mar 26 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 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 has encountered an Access Violation
2007/01/15 PHP
Php注入点构造代码
2008/06/14 PHP
JQuery触发事件例如click
2013/09/11 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
require.js的用法详解
2015/10/20 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
react-router 路由切换动画的实现示例
2018/12/03 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
python模块导入的方法
2019/10/24 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
彪马美国官网:PUMA美国
2017/03/09 全球购物
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
有针对性的求职自荐信
2013/11/14 职场文书
商务英语本科生的自我评价分享
2013/11/15 职场文书
初二生物教学反思
2014/02/03 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
三八节主持词
2014/03/17 职场文书
运动会主持词大全
2015/07/02 职场文书
2016年寒假生活小结
2015/10/10 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
Python机器学习之KNN近邻算法
2021/05/14 Python
Vue全家桶入门基础教程
2021/05/14 Vue.js
mysql 获取时间方式
2022/03/20 MySQL