当前位置：首页 > article >正文

基于Java Web的“使用Ajax实现无刷新实时显示公告信息”实验

article 2024/12/22 21:15:49

1.实验目的

学习和掌握jQuery获取网页元素对象的格式。使用JDBC进行数据库的连接以及使用Statement对象执行SQL查询语句。掌握使用Properties类加载Properties文件中参数的方式。使用<jsp:UseBean>标签创建对象。使用$.get方法向服务器发送请求以及获取服务器中的数据。

2.实验所用方法

上机实践

3.实验步骤及截图

建立数据库表格info:

在web目录下创建index.jsp文件用来向服务器发送请求，并对服务器返回结果进行展示:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>index</title>
  <script type="text/javascript"
          src="${pageContext.request.contextPath}/jquery-3.6.0.js"></script>
  <script language="JavaScript">
    function getInfo() {
      $.get("http://localhost:8080/chapter12/getInfo.jsp?nocache="+new  Date().getTime(),function (data) {
        $("#showInfo").html(data);
      });
    }
    $(document).ready(function () {
      getInfo();//调用getInfo()方法获取公告信息
      window.setInterval("getInfo()",600000);
    })
  </script>
</head>
<body>
<section>
  <marquee id="showInfo" direction="up" scrollamount="3">
  </marquee>
</section>
</body>
</html>

创建getInfo.jsp文件用于执行SQL语句并对查询结果进行输出:

<%@ page language="java" contentType="text/html;charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@page import="java.sql.*" %>
<jsp:useBean id="conn" class="cn.itcast.dao.ConnDB"
             scope="page"></jsp:useBean>
<ul>
    <%
        ResultSet rs=conn.executeQuery("select title from info order by id desc");
        if(rs.next()){
            do{
                out.print("<li>"+rs.getString(1)+"</li>");
            }while (rs.next());
        }else{
            out.print("<li>暂无公告信息！</li>");
        }
    %>
</ul>

创建创建数据库请问文件ConnDB.java工具类：

package cn.itcast.dao;
import java.io.InputStream;
import java.sql.*;
import java.util.Properties;
public class ConnDB {
    public Connection conn =null;
    public Statement stmt = null;
    public ResultSet rs = null;

    private static String propFileName= "connDB.properties";

    private static Properties prop=new Properties();

    private static String dbClassName ="";
    private static String dbUrl="";
    private static String user="";
    private static String pass="";

    static{
        try{
            //将Properties文件读取到InputStream对象中
            InputStream in=ConnDB.class.getResourceAsStream(propFileName);
            prop.load(in);
            dbClassName = prop.getProperty("DB_CLASS_NAME");
            dbUrl = prop.getProperty("DB_URL");
            user = prop.getProperty("user");
            pass = prop.getProperty("pass");
        }catch (Exception e){
            e.printStackTrace();                             //输出异常信息
        }
    }
    /**
     * 连接数据库
     */
    public  Connection getConection(){
        try{
            Class.forName(dbClassName).newInstance();

            conn = DriverManager.getConnection(dbUrl,user,pass);
        }catch (Exception ee){
            ee.printStackTrace();
        }
        if(conn==null){
            System.err.print("连接失败");
        }
        return conn;
    }
    /**
     * 执行查询
     */
    public ResultSet executeQuery(String sql){
        try{
            conn=getConection();
            stmt =conn.createStatement
                    (ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);

            rs =stmt.executeQuery(sql);
        }catch (SQLException ex){
            System.err.print(ex.getErrorCode());
        }
        return rs;
    }

    public void close(){
        try{
            if(rs!=null){
                rs.close();
            }
            if (stmt!=null){
                stmt.close();
            }
            if (conn!=null){
                conn.close();
            }
        }catch (Exception e){
            e.printStackTrace();
        }
    }
}