基于Java Web的“利用Ajax实现无革新实时表现公告信息”实行
1.实行目标学习和把握jQuery获取网页元素对象的格式。利用JDBC进行数据库的连接以及利用Statement对象实行SQL查询语句。把握利用Properties类加载Properties文件中参数的方式。利用<jsp:UseBean>标签创建对象。利用$.get方法向服务器发送哀求以及获取服务器中的数据。
2.实行所用方法
上机实践
3.实行步骤及截图
建立数据库表格info:
https://i-blog.csdnimg.cn/direct/6b3f964b9def4f5d9392ed82d2271671.png
https://i-blog.csdnimg.cn/direct/8401a00dd61b419da38f677da62dab33.png
在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="+newDate().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>
https://i-blog.csdnimg.cn/direct/c44ab96ab9cd4ef2b990a2875b418fec.png
创建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>
https://i-blog.csdnimg.cn/direct/ba6b03815d3e4095a98e1710d78322ff.png
创建创建数据库请问文件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(); //输出异常信息
}
}
/**
* 连接数据库
*/
publicConnection 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();
}
}
}
https://i-blog.csdnimg.cn/direct/2aec2ea28cef41a8a9b600cac4c1f793.png
连接数据库部分的代码如下图所示
https://i-blog.csdnimg.cn/direct/89d79af8dfba423f844d20c20af2c4e9.png
实行SQL语句的函数:
https://i-blog.csdnimg.cn/direct/fbfd28c18d7c49ffbf3b35f8993f0418.png
释放资源部分的代码如下图所示：
https://i-blog.csdnimg.cn/direct/a3f10f865a0a4ccfa3cc7e311af09338.png
连接数据库的设置文件connDB.properties如下图所示:
https://i-blog.csdnimg.cn/direct/af573dab979346fc89bf1b971f1789fe.png
从图中可知已经乐成连接数据库查询到相应数据:
https://i-blog.csdnimg.cn/direct/25a41c5107b54bc6b29ef136a2388d7d.png
4.实行过程中出现的问题
.properties文件是ideal生成的文本文件，用于存储数据库连接等设置信息。在创建和编辑设置文件时，需要遵循特定的格式要求，并注意掩护敏感信息的安全性和进步设置文件的可维护性。
5.实行心得
jQuery是一个快速、小巧、功能丰富的JavaScript库。它使得HTML文档遍历和操纵、事件处理、动画和Ajax等使命变得更加简单。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]