开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > Java编程 > Ajax > 查看源码
index.jsp
资源名称：Ajax.rar　[点击查看]
上传用户：shjgzm
上传日期：2017-08-31
资源大小：2757k
文件大小：4k
源码类别：

Ajax

开发平台：

Java

index.jsp：源码内容
  1. <%@ page contentType="text/html; charset=UTF-8"%>
  2. <%@ page language="java"%>
  3. <%@ page import="java.sql.*,ajax.db.DBUtils"%>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  5. <html>
  6. <head>
  7. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  8. <title>天气情况查询</title>
  10. <style type="text/css">
  11. /* 页面字体样式 */
  12. body, td, input, select {
  13.     font-family:Arial;
  14.     font-size:12px;
  15. }
  17. /* 表格基本样式 */
  18. table.default {
  19.     border-collapse:collapse;
  20.     width:300px;
  21. }
  23. /* 表格单元格样式 */
  24. table.default td {
  25.     border:1px solid black;
  26.     padding:3px;
  27.     height:30px;
  28. }
  30. /* 列头样式 */
  31. table.default td.item {
  32.     background:#006699;
  33.     color:#fff;
  34. }
  35. </style>
  37. <script type="text/javascript">
  38. var xmlHttp;    //用于保存XMLHttpRequest对象的全局变量
  40. //用于创建XMLHttpRequest对象
  41. function createXmlHttp() {
  42.     //根据window.XMLHttpRequest对象是否存在使用不同的创建方式
  43.     if (window.XMLHttpRequest) {
  44.        xmlHttp = new XMLHttpRequest();                  //FireFox、Opera等浏览器支持的创建方式
  45.     } else {
  46.        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
  47.     }
  48. }
  50. //加载天气信息
  51. function loadWeather(cityCode) {
  52.     if (cityCode != "") {
  53.         createXmlHttp();                                    //创建XmlHttpRequest对象
  54.         xmlHttp.onreadystatechange = loadWeatherCallback;   //设置回调函数
  55.         xmlHttp.open("GET", "weather.jsp?cityCode=" + cityCode, true);
  56.         xmlHttp.send(null);
  57.     }
  58. }
  60. //加载天气信息的回调函数
  61. function loadWeatherCallback() {
  62.     if (xmlHttp.readyState == 4) {
  63.         var weatherInfo = eval("(" + xmlHttp.responseText + ")");   //解析JSON格式的服务器响应
  64.         //遍历JSON对象，将信息写入页面
  65.         for (o in weatherInfo) {
  66.             document.getElementById(o).innerHTML = weatherInfo[o];
  67.         }
  68.     }
  69. }
  70. </script>
  71. </head>
  73. <body>
  74. <h1>天气情况查询</h1>
  76. <select id="citySel" onchange="loadWeather(this.value)">
  77. <option value="">--请选择城市--</option>
  78. <%
  79.     String sql = "select code, name, chinese from weather_citycode order by name asc";   //定义查询数据库的SQL语句
  80.     Connection conn = null;                 //声明Connection对象
  81.     PreparedStatement pstmt = null;         //声明PreparedStatement对象
  82.     ResultSet rs = null;                    //声明ResultSet对象
  83.     try {
  84.         conn = DBUtils.getConnection();     //获取数据库连接
  85.         pstmt = conn.prepareStatement(sql); //根据sql创建PreparedStatement
  86.         rs = pstmt.executeQuery();          //执行查询，返回结果集
  87.         while (rs.next()) {                 //遍历结果集
  88.             %>
  89.             <option value="<%=rs.getString("code")%>"><%=rs.getString("name")%> [<%=rs.getString("chinese")%>]</option>
  90.             <%
  91.         }
  92.     } catch (SQLException e) {
  93.         System.out.println(e.toString());
  94.     } finally {
  95.         DBUtils.close(rs);                  //关闭结果集
  96.         DBUtils.close(pstmt);               //关闭PreparedStatement
  97.         DBUtils.close(conn);                //关闭连接
  98.     }
  99. %>
  100. </select>
  102. <table class="default">
  103. <tr>
  104. <td class="item" width="35%">天气状况：</td>
  105. <td width="65%" id="condition"></td>
  106. </tr>
  107. <tr>
  108. <td class="item">最后更新日期：</td>
  109. <td id="lastBuildDate"></td>
  110. </tr>
  111. <tr>
  112. <td class="item">感觉气温：</td>
  113. <td id="chill"></td>
  114. </tr>
  115. <tr>
  116. <td class="item">实际气温：</td>
  117. <td id="temp"></td>
  118. </tr>
  119. <tr>
  120. <td class="item">最低气温：</td>
  121. <td id="low"></td>
  122. </tr>
  123. <tr>
  124. <td class="item">最高气温：</td>
  125. <td id="high"></td>
  126. </tr>
  127. <tr>
  128. <td class="item">风向：</td>
  129. <td id="direction"></td>
  130. </tr>
  131. <tr>
  132. <td class="item">风速：</td>
  133. <td id="speed"></td>
  134. </tr>
  135. <tr>
  136. <td class="item">湿度：</td>
  137. <td id="humidity"></td>
  138. </tr>
  139. <tr>
  140. <td class="item">能见度：</td>
  141. <td id="visibility"></td>
  142. </tr>
  143. <tr>
  144. <td class="item">日出：</td>
  145. <td id="sunrise"></td>
  146. </tr>
  147. <tr>
  148. <td class="item">日落：</td>
  149. <td id="sunset"></td>
  150. </tr>
  151. </table>
  153. </body>
  154. </html>