ajax+jsp的天气预报

最新推荐文章于 2025-07-30 20:41:54 发布

dengjianqiang001

最新推荐文章于 2025-07-30 20:41:54 发布

阅读量993

点赞数

分类专栏： ajax 文章标签： jsp ajax icons function border prototype

ajax 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用Prototype库实现的简单天气预报应用示例。该应用通过Ajax从服务器获取天气数据，并利用JavaScript动态更新网页上的天气信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  这是一个用了 prototype 的简单应用,作为学习prototype的入门实例真的不错,来自 Swelldom.net 主页,站长作了少许改动.另外天气预报的数据,大家自己弄吧,做个小偷程序什么的,我这里就用下面的JSP代替了:
getweather.jsp

<%@ page contentType="text/html; charset=gb2312" %>
<%
String city=request.getParameter("city");
if(city.equals("0"))
   out.print("北京,2006-7-17,多云,30,南风2级");
else if(city.equals("1"))
   out.print("上海,2006-7-17,多云,35,雷雨大风4级");
else if(city.equals("2"))
   out.print("天津,2006-7-17,多云,35,大风5级");
else
   out.print("没有数据,没有数据,没有数据,没有数据,没有数据");

页面代码:weather.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD><TITLE>weather</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT language=javascript src="icons/prototype.js"></SCRIPT>
<SCRIPT language=javascript src="icons/common.js"></SCRIPT>

<STYLE type=text/css>BODY {
   FONT-SIZE: 12px; FONT-FAMILY: Courier New, Courier, mono
}
TD {
  FONT-SIZE: 12px; FONT-FAMILY: Courier New, Courier, mono
}
TH {
  FONT-SIZE: 12px; FONT-FAMILY: Courier New, Courier, mono
}
BODY {
  MARGIN: 0px
}
</STYLE>

<SCRIPT language=javascript>

function loadPage(){
  loadCity();
  loadWeather();
}

//======================================================;
function loadWeather(s){
if($("selectCity")) $("selectCity").disabled = true;
if(s == undefined) s = "0";
var o = $("weatherTd");
o.innerHTML = getLoadInfo();
loadAjaxData("getweather.jsp",{city:s},successWeather,errorWeather);
}

function successWeather(v){
if($("selectCity")) $("selectCity").disabled = false;
var o = $("weatherTd");
o.innerHTML = getWeatherHTML(v.responseText);
}

function errorWeather(){
if($("selectCity")) $("selectCity").disabled = false;
var o = $("weatherTd");
o.innerHTML = getErrorInfo();
}

function getWeatherHTML(s){
var a = s.split(",");
var ta = ["城市","日期","天气","气温","风力"];
var s = getWeatherShow(a[2])+'<br>';
for(var i=0;i<ta.length;i++){
s += ta[i] +":"+a[i]+"<br>";
}
return s;
}

function getWeatherShow(s){
var a = s.split("转");
s = "";
for(var i=0;i<a.length;i++){
s += getWeatherIcon(a[i]);
}
return s;
}

function getWeatherIcon(s){
var icons = new Array();
icons[0] = {name:"",src:"w0.gif"};
icons[1] = {name:"中雨",src:"w0.gif"};
icons[2] = {name:"中雪",src:"w0.gif"};
icons[3] = {name:"暴雨",src:"w0.gif"};
icons[4] = {name:"多云",src:"w0.gif"};
icons[5] = {name:"小雨",src:"w0.gif"};
icons[6] = {name:"大雨",src:"w0.gif"};
icons[7] = {name:"阴",src:"w0.gif"};
icons[8] = {name:"晴",src:"w0.gif"};
icons[9] = {name:"雾",src:"w0.gif"};
icons[10] = {name:"雨加雪",src:"w0.gif"};
icons[11] = {name:"扬沙",src:"w0.gif"};
icons[12] = {name:"冰雹",src:"w0.gif"};
icons[13] = {name:"小雪",src:"w0.gif"};
icons[14] = {name:"雷阵雨",src:"w0.gif"};
icons[15] = {name:"大雪",src:"w0.gif"};
icons[16] = {name:"阵雨",src:"w0.gif"};
var r = icons[0].src;
for(var i=1;i<icons.length;i++){
if(icons[i].name == s){
r = icons[i].src;
break;
}
}
return '<img src="icons/'+r+'" width="60" height="60" border="0" align="absmiddle">';
}

//======================================================;
function loadCity(){
var o = $("cityTd");
o.innerHTML = getLoadInfo();
loadAjaxData("city.jsp",null,successCity,errorCity);
}

function successCity(v){
var o = $("cityTd");
o.innerHTML = getCityHTML(v.responseText);
}

function errorCity(){
var o = $("cityTd");
o.innerHTML = getErrorInfo();
}

function getCityHTML(s){
var a = s.split(",");
s = '城市：<select id="selectCity" onChange="loadWeather(this.value);">';
for(var i=0;i<a.length;i++){
s += '<option value="'+i+'">'+a[i]+'</option>';
}
s += '</select>';
return s;
}

//======================================================;
function getLoadInfo(){
return '<img src="icons/loading.gif" width="16" height="16" border="0" align="absmiddle">正在加载数据...';
}
function getErrorInfo(){
return '<img src="icons/warning.gif" width="14" height="14" border="0" align="absmiddle">数据加载失败!';
}
//======================================================;
</SCRIPT>

<META content="MSHTML 6.00.2900.2912" name=GENERATOR></HEAD>
<BODY onload=loadPage();>
<H2 align=center>Ajax版的天气预报</H2><BR>
<TABLE height=150 cellSpacing=1 cellPadding=5 width=300 align=center bgColor=#999999 border=0>
<TBODY>
<TR>
<TD id=cityTd bgColor=#eeeeee height="5%"> </TD></TR>
<TR>
<TD id=weatherTd bgColor=#ffffff height="95%"><BR></TD></TR></TBODY></TABLE>

</BODY></HTML>

其它文件请下载.