用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获取图片实际宽高及根据图片大小进行自适应
Aug 11 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
给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打开文件fopen函数的使用说明
2013/07/05 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
php微信开发之关注事件
2018/06/14 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
一个仿糯米弹框效果demo
2014/07/22 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
信息管理专业推荐信
2013/10/29 职场文书
总经理岗位职责范本
2014/02/02 职场文书
人事任命书怎么写
2014/06/05 职场文书
公司转让协议书
2016/03/19 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang