用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对象的property和prototype是什么一种关系
Aug 06 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
vue router 配置路由的方法
Jul 26 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 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
推荐25款php中非常有用的类库
2014/09/29 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
Python对数据库操作
2016/03/28 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
python中使用print输出中文的方法
2018/07/16 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
找到不普通的东西:Bonanza
2016/10/20 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
授权委托书格式模板
2014/04/03 职场文书
服务整改报告
2014/11/06 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android