用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 $(document).ready() 与window.onload的区别
Dec 28 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 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 print EOF实现方法
2009/05/21 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
php去除数组中重复数据
2014/11/18 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
Laravel下生成验证码的类
2017/11/15 PHP
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
初学python数组的处理代码
2011/01/04 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
几个Linux面试题笔试题
2016/08/01 面试题
个人自查自纠材料
2014/10/14 职场文书
出差报告范文
2014/11/06 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书