应用jquery,servlet,ajax 实现无刷新的,每次从数据库中获取一次最新公告,并滚动显示。前端和后端代码

时间: 2024-03-09 16:45:34 浏览: 23
前端代码: ```html <!DOCTYPE html> <html> <head> <title>公告滚动显示</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <style type="text/css"> #notice { width: 300px; height: 50px; overflow: hidden; font-size: 18px; line-height: 50px; text-align: center; border: 1px solid #ccc; } </style> </head> <body> <div id="notice"></div> <script> $(function() { setInterval(getNotice, 5000); // 5秒钟获取一次公告 }); function getNotice() { $.ajax({ type: "POST", url: "GetNoticeServlet", dataType: "json", success: function(result) { if (result.success) { var notice = result.data; $('#notice').text(notice); $('#notice').slideDown(); setTimeout(function() { $('#notice').slideUp(); }, 3000); } } }); } </script> </body> </html> ``` 后端代码(Java Servlet): ```java import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.JSONObject; @WebServlet("/GetNoticeServlet") public class GetNoticeServlet extends HttpServlet { private static final long serialVersionUID = 1L; private static final String JDBC_DRIVER = "com.mysql.jdbc.Driver"; private static final String DB_URL = "jdbc:mysql://localhost:3306/test"; private static final String USER = "root"; private static final String PASS = "root"; protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("application/json;charset=UTF-8"); PrintWriter out = response.getWriter(); JSONObject json = new JSONObject(); Connection conn = null; PreparedStatement stmt = null; ResultSet rs = null; try { Class.forName(JDBC_DRIVER); conn = DriverManager.getConnection(DB_URL, USER, PASS); String sql = "SELECT notice FROM notice ORDER BY id DESC LIMIT 1"; stmt = conn.prepareStatement(sql); rs = stmt.executeQuery(); if (rs.next()) { String notice = rs.getString("notice"); json.put("success", true); json.put("data", notice); } else { json.put("success", false); json.put("msg", "暂无公告!"); } } catch (Exception e) { e.printStackTrace(); json.put("success", false); json.put("msg", "获取公告失败!"); } finally { try { if (rs != null) { rs.close(); } if (stmt != null) { stmt.close(); } if (conn != null) { conn.close(); } } catch (SQLException e) { e.printStackTrace(); } } out.println(json); out.flush(); out.close(); } } ``` 该代码实现了每隔5秒从数据库中获取最新的公告并滚动显示。前端使用了jQuery库和Ajax技术,后端使用了Java Servlet来处理请求和响应。需要注意的是,数据库连接信息需要根据实际情况修改。

相关推荐

最新推荐

recommend-type

Servlet获取AJAX POST请求中参数以form data和request payload形式传输的方法

主要介绍了Servlet获取AJAX POST请求中参数以form data和request payload形式传输的方法,结合实例形式详细分析了post数据发送及获取请求数据的原理与相关操作注意事项,需要的朋友可以参考下
recommend-type

Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果

主要介绍了Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果,非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧
recommend-type

jQuery Ajax 实现在html页面实时显示用户登录状态

本文给大家分享jQuery Ajax 实现在html页面实时显示用户登录状态的实现方法,非常不错,具有参考借鉴价值,需要的朋友参考下
recommend-type

基于jQuery获取table数据发送到后端

主要介绍了基于jQuery获取table数据发送到后端,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
recommend-type

jQuery+ajax实现批量删除功能完整示例

主要介绍了jQuery+ajax实现批量删除功能,结合完整实例形式分析了jQuery+ajax结合bootstrap与layer.js插件实现的批量删除与交互功能相关操作技巧,需要的朋友可以参考下
recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

实现实时数据湖架构:Kafka与Hive集成

![实现实时数据湖架构:Kafka与Hive集成](https://img-blog.csdnimg.cn/img_convert/10eb2e6972b3b6086286fc64c0b3ee41.jpeg) # 1. 实时数据湖架构概述** 实时数据湖是一种现代数据管理架构,它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同,实时数据湖不依赖于预先定义的模式,而是采用灵活的架构,可以处理各种数据类型和格式。这种架构为企业提供了以下优势: - **实时洞察:**实时数据湖允许企业访问最新的数据,从而做出更明智的决策。 - **数据民主化:**实时数据湖使各种利益相关者都可
recommend-type

用 Python 画一个可以动的爱心

好的,我可以帮助您使用Python来绘制一个动态的爱心。您可以使用turtle库来实现。以下是实现代码: ```python import turtle import math # 设置画布和画笔 canvas = turtle.Screen() canvas.bgcolor("black") pencil = turtle.Turtle() pencil.speed(0) pencil.color("red", "pink") pencil.pensize(3) # 定义爱心函数 def draw_love(heart_size, x_offset=0, y_offset=0):
recommend-type

JSBSim Reference Manual

JSBSim参考手册,其中包含JSBSim简介,JSBSim配置文件xml的编写语法,编程手册以及一些应用实例等。其中有部分内容还没有写完,估计有生之年很难看到完整版了,但是内容还是很有参考价值的。