?? index.jsp
字號(hào):
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page language="java"%>
<%@ page import="java.sql.*,ajax.db.DBUtils"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>天氣情況查詢</title>
<style type="text/css">
/* 頁(yè)面字體樣式 */
body, td, input, select {
font-family:Arial;
font-size:12px;
}
/* 表格基本樣式 */
table.default {
border-collapse:collapse;
width:300px;
}
/* 表格單元格樣式 */
table.default td {
border:1px solid black;
padding:3px;
height:30px;
}
/* 列頭樣式 */
table.default td.item {
background:#006699;
color:#fff;
}
</style>
<script type="text/javascript">
var xmlHttp; //用于保存XMLHttpRequest對(duì)象的全局變量
//用于創(chuàng)建XMLHttpRequest對(duì)象
function createXmlHttp() {
//根據(jù)window.XMLHttpRequest對(duì)象是否存在使用不同的創(chuàng)建方式
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest(); //FireFox、Opera等瀏覽器支持的創(chuàng)建方式
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE瀏覽器支持的創(chuàng)建方式
}
}
//加載天氣信息
function loadWeather(cityCode) {
if (cityCode != "") {
createXmlHttp(); //創(chuàng)建XmlHttpRequest對(duì)象
xmlHttp.onreadystatechange = loadWeatherCallback; //設(shè)置回調(diào)函數(shù)
xmlHttp.open("GET", "weather.jsp?cityCode=" + cityCode, true);
xmlHttp.send(null);
}
}
//加載天氣信息的回調(diào)函數(shù)
function loadWeatherCallback() {
if (xmlHttp.readyState == 4) {
var weatherInfo = eval("(" + xmlHttp.responseText + ")"); //解析JSON格式的服務(wù)器響應(yīng)
//遍歷JSON對(duì)象，將信息寫入頁(yè)面
for (o in weatherInfo) {
document.getElementById(o).innerHTML = weatherInfo[o];
}
}
}
</script>
</head>
<body>
<h1>天氣情況查詢</h1>
<select id="citySel" onchange="loadWeather(this.value)">
<option value="">--請(qǐng)選擇城市--</option>
<%
String sql = "select code, name, chinese from weather_citycode order by name asc"; //定義查詢數(shù)據(jù)庫(kù)的SQL語(yǔ)句
Connection conn = null; //聲明Connection對(duì)象
PreparedStatement pstmt = null; //聲明PreparedStatement對(duì)象
ResultSet rs = null; //聲明ResultSet對(duì)象
try {
conn = DBUtils.getConnection(); //獲取數(shù)據(jù)庫(kù)連接
pstmt = conn.prepareStatement(sql); //根據(jù)sql創(chuàng)建PreparedStatement
rs = pstmt.executeQuery(); //執(zhí)行查詢，返回結(jié)果集
while (rs.next()) { //遍歷結(jié)果集
%>
<option value="<%=rs.getString("code")%>"><%=rs.getString("name")%> [<%=rs.getString("chinese")%>]</option>
<%
}
} catch (SQLException e) {
System.out.println(e.toString());
} finally {
DBUtils.close(rs); //關(guān)閉結(jié)果集
DBUtils.close(pstmt); //關(guān)閉PreparedStatement
DBUtils.close(conn); //關(guān)閉連接
}
%>
</select>
<table class="default">
<tr>
<td class="item" width="35%">天氣狀況：</td>
<td width="65%" id="condition"></td>
</tr>
<tr>
<td class="item">最后更新日期：</td>
<td id="lastBuildDate"></td>
</tr>
<tr>
<td class="item">感覺(jué)氣溫：</td>
<td id="chill"></td>
</tr>
<tr>
<td class="item">實(shí)際氣溫：</td>
<td id="temp"></td>
</tr>
<tr>
<td class="item">最低氣溫：</td>
<td id="low"></td>
</tr>
<tr>
<td class="item">最高氣溫：</td>
<td id="high"></td>
</tr>
<tr>
<td class="item">風(fēng)向：</td>
<td id="direction"></td>
</tr>
<tr>
<td class="item">風(fēng)速：</td>
<td id="speed"></td>
</tr>
<tr>
<td class="item">濕度：</td>
<td id="humidity"></td>
</tr>
<tr>
<td class="item">能見(jiàn)度：</td>
<td id="visibility"></td>
</tr>
<tr>
<td class="item">日出：</td>
<td id="sunrise"></td>
</tr>
<tr>
<td class="item">日落：</td>
<td id="sunset"></td>
</tr>
</table>
</body>
</html>
?? 快捷鍵說(shuō)明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號(hào)
Ctrl + =
減小字號(hào)
Ctrl + -