用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 相关文章推荐
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
vue发送ajax请求详解
Oct 09 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
react实现复选框全选和反选组件效果
Aug 25 Javascript
javascript实现一款好看的秒表计时器
Sep 05 Javascript
vue项目中微信登录的实现操作
Sep 08 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遍历目录viewDir函数
2009/12/15 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
git进行版本控制心得详谈
2017/12/10 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
Python3.9新特性详解
2020/10/10 Python
全球精选男装和家居用品:Article
2020/04/13 全球购物
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
早餐连锁店计划书
2014/01/08 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
小升初自荐信范文
2015/03/05 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android