使用Servlet实现对数据库表格的增删改查和分页展示

原创 于 2025-12-13 17:32:36 发布 · 243 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#数据库

一.准备工作

在做项目开始前，我们要配置好相关的Tomcat环境，各种依赖等等，然后如下图把要用到的文件创建好。

前端：（注意show在web文件夹下创建，不是WEB-INF）

后端：（一共5个文件）

数据库表格：

需要用到的工具类：

DBConnection：

public class DBConnection {

	public static void main(String[] args) {

	}

	String driver = "com.mysql.cj.jdbc.Driver";
	String url = "jdbc:mysql://localhost:3306/你的数据库名?useSSL=false&serverTimezone=UTC";
	String user = "root";//用户名
	String password = "2020";//密码

	public Connection conn;

	public DBConnection() {

		try {
			Class.forName(driver);
			conn = (Connection) DriverManager.getConnection(url, user, password);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	public void close() {
		try {
			this.conn.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

还有MysqlUtil的getJsonBySql方法，作用是根据传入的 SQL 查询语句和指定字段名，从数据库中查询数据，将查询结果封装成 ArrayList 后，再转换为 JSON 格式的字符串返回：

    public static String getJsonBySql( String sql,String[] colums){
       
        System.err.println("sql:" + sql);
        ArrayList<String[]>  result = new ArrayList<String[]>();
        DBConnection db = new DBConnection();
        try {
            Statement stmt = (Statement) db.conn.createStatement();
            ResultSet rs = (ResultSet) stmt.executeQuery(sql);
            while(rs.next()){
                String[] dataRow = new String[colums.length];
                for( int i = 0; i < dataRow.length; i++ ) {
                    dataRow[i] = rs.getString( colums[i] );
                }
                result.add(dataRow);
            }
            rs.close();
            db.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }

        return listToJson(result,colums);
    }

写在MysqlUtil即可。

二.前端

前端部分的CSS代码可以自由发挥。

首先在head部分写上jQuery的依赖，必须要写：

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

然后是主体部分：

<body onload="getPage()">
<button onclick="openInsertDiv()">添加</button>
<div id="inputDiv" class="OpenDiv">
    用户名：<input type="text" id="username" placeholder="请输入用户名："/><br/>
    密码：<input type="text" id="password" placeholder="请输入密码："/><br/>
    性别：<input type="text" id="sex" placeholder="请输入性别："/><br/>
    年龄：<input type="text" id="age" placeholder="请输入年龄："/><br/>
    手机：<input type="text" id="phone" placeholder="请输入手机："/><br/>
    地址：<input type="text" id="address" placeholder="请输入地址："/><br/>
    <button onclick="insert()">保存</button>
</div>
<div id="show">这是数据展示</div>
<div id="page">
    <button onclick="upPage()" style="float: left">上一页</button>
    <div id="pageIndex" style="float: left;width: 20px;border: 1px solid #000">1</div>
    <button onclick="downPage()" style="float: left">下一页</button>
    <div id="pageNum" style="float: left;width: 55px;border:1px solid #000">共0页</div>
</div>
<div id="updateDiv" class="OpenDiv">
    id：<input type="text" id="u_id" placeholder="请输入id："/><br/>
    用户名：<input type="text" id="u_username" placeholder="请输入用户名："/><br/>
    密码：<input type="text" id="u_password" placeholder="请输入密码："/><br/>
    性别：<input type="text" id="u_sex" placeholder="请输入性别："/><br/>
    年龄：<input type="text" id="u_age" placeholder="请输入年龄："/><br/>
    手机：<input type="text" id="u_phone" placeholder="请输入手机："/><br/>
    地址：<input type="text" id="u_address" placeholder="请输入地址："/><br/>
    <button onclick="update()">保存</button>
</div>
</body>

接下来在<script></script>里面完成对各种方法的实现:

添加弹窗方法:

function openInsertDiv(){
        document.getElementById("inputDiv").style.display="block";
    }

修改弹窗方法：

    function openUpdateDiv(id,username,password,sex,age,phone,address){
        document.getElementById("updateDiv").style.display="block";
        $("#u_id").val(id);
        $("#u_username").val(username);
        $("#u_password").val(password);
        $("#u_sex").val(sex);
        $("#u_age").val(age);
        $("#u_phone").val(phone);
        $("#u_address").val(address);
    }

get方法：

    function get(){
        var pageIndex = $("#pageIndex").html();
        $.ajax({
            type:"get",
            url:"/1009Servlet/show",
            data:{"pageIndex":pageIndex,"pageSize":"5"},
            success:function (data){
                console.log(data);
                showData(data.data);
            }
        })
    }

获取页数方法：

    function getPage(){
        $.ajax({
            type:"get",
            url:"/1009Servlet/getPage",
            success:function (data){
                console.log(data);
                $("#pageNum").html("共"+data.page+"页");
                get();
            }
        })
    }

上一页方法：

    function upPage(){
        var pageIndex = $("#pageIndex").html();
        if(pageIndex == 1){
            alert("已经是第一页了");
            return;
        }
        pageIndex--;
        $("#pageIndex").html(pageIndex);
        getPage();
    }

下一页方法：

    function downPage(){
        var pageIndex = $("#pageIndex").html();
        var pageNum = $("#pageNum").html();
        pageNum = pageNum.substring(1,pageNum.length-1);
        if(pageIndex == pageNum){
            alert("已经是最后一页了");
            return;
        }
        pageIndex++;
        $("#pageIndex").html(pageIndex);
        getPage();
    }

添加方法：

    function insert(){
        document.getElementById("inputDiv").style.display="none";
        var username = $("#username").val();
        var password = $("#password").val();
        var sex = $("#sex").val();
        var age = $("#age").val();
        var phone = $("#phone").val();
        var address = $("#address").val();
        $.ajax({
            type:"post",
            url:"/1009Servlet/insert",
            data: {"username":username,"password":password,"sex":sex,"age":age,"phone":phone,"address":address},
            success:function (data){
                console.log(data);
                getPage();
            }
        })
    }

删除方法：

    function del(id){
        $.ajax({
            type: "post",
            url: "/1009Servlet/delete",
            data:{"id":id},
            success:function (data){
                console.log(data);
                getPage();
            }
        })
    }

修改方法：

    function update(){
        document.getElementById("updateDiv").style.display="none";
        var id = $("#u_id").val();
        var username = $("#u_username").val();
        var password = $("#u_password").val();
        var sex = $("#u_sex").val();
        var age = $("#u_age").val();
        var phone = $("#u_phone").val();
        var address = $("#u_address").val();
        $.ajax({
            type:"post",
            url:"/1009Servlet/update",
            data: {"id":id,"username":username,"password":password,"sex":sex,"age":age,"phone":phone,"address":address},
            success:function (data){
                console.log(data);
                getPage();
            }
        })
    }

展示方法：

    function showData(data){
        var html = "<table border='1'>";
        html +="<tr>";
        html +="<th>编号</th>";
        html +="<th>姓名</th>";
        html +="<th>密码</th>";
        html +="<th>性别</th>";
        html +="<th>年龄</th>";
        html +="<th>手机</th>";
        html +="<th>地址</th>";
        html +="<th>操作</th>";
        html +="</tr>";
        for (var i = 0;i < data.length;i++){
            html += "<tr>";
            html += "<td>" + data[i].id + "</td>";
            html += "<td>" + data[i].username + "</td>";
            html += "<td>" + data[i].password + "</td>";
            html += "<td>" + data[i].sex + "</td>";
            html += "<td>" + data[i].age + "</td>";
            html += "<td>" + data[i].phone + "</td>";
            html += "<td>" + data[i].address + "</td>";
            html += "<td>";
            html += "<button onclick='openUpdateDiv("+data[i].id+",\""+data[i].username+"\",\""+data[i].password+"\",\""+data[i].sex+"\",\""+data[i].age+"\",\""+data[i].phone+"\",\""+data[i].address+"\")'>修改</button>"
            html += "<button onclick='del("+data[i].id+")'>删除</button>";
            html += "</td>";
            html += "</tr>";
        }
        html += "</table>";
        $("#show").empty().html(html);
    }

三.后端

后端代码必写的三个要点

（1）继承HttpServlet

（2）写上WebServlet注解，且格式一定要正确

（3）一定实现doGet方法或doPost方法

WebServlet注解要写在类名上方，注意括号里要写“”和斜杠/。

首先来看ShowServlet类：

@WebServlet("/show")
public class ShowServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String pageIndex = req.getParameter("pageIndex");
        String pageSize = req.getParameter("pageSize");
        int IntPageSize = Integer.parseInt(pageSize);
        int IntPageIndex = Integer.parseInt(pageIndex);
        String sql = "select * from user order by id asc limit "+IntPageSize+" offset "+(IntPageIndex-1)*IntPageSize;
        String columns[] = {"id","username","password","sex","age","phone","address"};
        String data = MysqlUtil.getJsonBySql(sql,columns);
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("application/json");
        resp.getWriter().append(data);
    }
}

然后是GetCountServlet类：

@WebServlet("/getPage")
public class GetCountServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String sql = "select count(*) from user ";
        int count = MysqlUtil.getCount(sql);
        int pageCount =0;
        if(count % 5 ==0){
            pageCount = count/5;
        }else {
            pageCount = count/5+1;
        }
        String data = "{\"code\":200,\"msg\":\"success\",\"page\":"+pageCount+"}";
        resp.setCharacterEncoding("UTF-8");
        resp.setContentType("application/json");
        resp.getWriter().append(data);
    }
}

InsertServlet类：

@WebServlet("/insert")
public class InsertServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String sex = req.getParameter("sex");
        String age = req.getParameter("age");
        String phone = req.getParameter("phone");
        String address = req.getParameter("address");
        System.out.println(username+" "+password+" "+sex+" "+" "+age+" "+phone+" "+address);
        String sql = "insert into user(Username,password,sex,age,phone,address) "
                +"values('"+username+"','"+password+"','"+sex+"',"+age+",'"+phone+"','"+address+"')";
        int count = MysqlUtil.add(sql);
        String data = "";
        if(count > 0){
            data = "{\"code\":200,\"msg\":\"success\"}";
        }else {
            data = "{\"code\":999,\"msg\":\"error\"}";
        }
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("application/json");
        resp.getWriter().append(data);
    }
}

DeleteServlet类：

@WebServlet("/delete")
public class DeleteServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String id = req.getParameter("id");
        System.out.println("id="+id);
        String sql = "delete from user where id = "+id;
        int count = MysqlUtil.del(sql);
        String data = "";
        if(count > 0){
            data = "{\"code\":200,\"msg\":\"success\"}";
        }else {
            data = "{\"code\":999,\"msg\":\"error\"}";
        }
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("application/json");
        resp.getWriter().append(data);
    }
}

最后是UpdateServlet类：

@WebServlet("/update")
public class UpdateServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String id = req.getParameter("id");
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String sex = req.getParameter("sex");
        String age = req.getParameter("age");
        String phone = req.getParameter("phone");
        String address = req.getParameter("address");
        System.out.println(id+" "+username+" "+password+" "+sex+" "+" "+age+" "+phone+" "+address);
        String sql = "update user set username = '"+username+"',password = '"+password+"',sex = '"+sex+"',age = "+age+
                " ,phone = '"+phone+"',address = '"+address+"' where id = "+id;
        int count = MysqlUtil.update(sql);
        String data = "";
        if(count > 0){
            data = "{\"code\":200,\"msg\":\"success\"}";
        }else {
            data = "{\"code\":999,\"msg\":\"error\"}";
        }
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("application/json");
        resp.getWriter().append(data);
    }
}

四.效果

实现完所以代码之后的效果如下（这里没有写上address）：

柒.梧.
关注
使用Servlet对Mysql数据库表中数据进行增删改查
Lubin_9527的博客
10-15 7713
一： 要对数据库内的数据进行增删改查，首先我们需要连接到数据库 1）为了方便我们可以把jdbc代码写到一个Utils工具类内 package westos; import java.sql.*; public class Utils { //这里的b是指你要查询的表名 static final String URL = "jdbc:mysql://local...
使用Servlet和JSp在浏览器上实现对数据库表的增删改查（新手）
L的博客
04-23 1779
使用Servlet和JSp在浏览器上实现对数据库表的增删改查（新手） 第一步：用户输入网址进入一个登陆界面。 里面要有账号密码输入。 登陆界面链接到登陆的Servlet类中。 Servlet类 --> 1、接收参数（账户密码） 　　　　　　 2、调用DAO层的 SQL语句 验证账户密码。 　　　　　　...
servlet和vue的增删改查
qq_48690030的博客
11-20 1458
jichu
java Servlet实现前端对MySQL数据库的增删改查
pillow233的博客
08-27 934
java Servlet实现前端对MySQL数据库的增删改查 注：此版并未实现date类型的跨域转换，待更新 前端代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>人员基本信息</title> <!-- jquery要在时间插件...
Servlet简单实现前端和后端的增删改查功能的实现
weixin_45636386的博客
08-09 3347
简单的sevlet项目来实现增删改查操作
druid完成数据库列表和分页展示和增删改查
xue_yun_xiang的博客
04-17 963
一、basedao + druid 数据库连接池 c3p0 druid：魔鬼，号称最好的java 连接池 为什么要用数据连接池？ 1.避免重复创建链接，链接创建不关闭情况 ​ 数据库链接非常宝贵/资源有限 2.可以提高查选效率（以前频繁创建链接） 3.便于对链接的同一管理和监控，便于优化应用 线程池和数据库连接池统称为 池化技术 1、创建servelt工程 commons-beanutils-1.8.3.jar 将map 转化为对象工具类 commons-dbutils-1.7.jar qu
JSP&Servlet（8）——使用Servlet实现增删改查
二木成林
10-06 3229
效果展示 显示所有用户 添加用户 修改用户 删除用户 代码结构 源码 java User.java 用户实体类。 package bean; import java.io.Serializable; public class User implements Serializable { private int id; private S...
初次使用SSM框架编写列表的增删改查以及分页
laodaye_xiaolizi的博客
07-08 2276
实现SSM框架下的学生信息表的增删改查以及分页功能的介绍
servlet+jsp+filter实现用户管理系统 —— 增删改查的艺术
2401_84150165的博客
05-03 1161
《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》，点击传送门，即可获取！public void setName(String name) {this.name = name;}public String getGender() {return gender;}public void setGender(String gender) {this.gender = gender;}public int getAge() {return age;}public void setAge(
springboot+vue+elementui实现增删改查和分页查询
09-20
在本项目中，"springboot+vue+elementui实现增删改查和分页查询"是一个基于现代Web技术栈的简单但实用的应用示例。它整合了Spring Boot、Vue.js和Element UI，这三个组件分别在后端、前端和UI设计方面发挥关键作用，...
Servlet+jsp+AJax的分页及增删改查
06-13
在本文中，我们将深入探讨如何使用Servlet、JSP和Ajax技术实现一个完整的增删改查（CRUD）功能以及分页。Servlet是Java Web应用程序的一部分，用于处理客户端请求和响应。JSP则是一种动态网页技术，它允许在服务器端...
基于JSP和Servlet实现MVC模式的增删改查与分页功能
本项目“mvc增删改查、分也显示”正是基于经典的MVC设计模式，采用JSP（JavaServer Pages）、Servlet和JavaBean技术栈实现了一个完整的数据管理功能模块，涵盖了基本的数据操作——增（Insert）、删（Delete）、改...
基于JSP+Servlet实现MySQL数据库增删改查操作
首先，从标题“JSP+Servlet+MySQL 数据库增删改查”可以看出，该项目的核心目标是实现对数据库中数据的基本操作：增加（Insert）、删除（Delete）、修改（Update）和查询（Select），即常说的CRUD操作。这些操作是...
基于Java旅游信息推荐系统(源码+数据库+文档)
JIngJaneIL的博客
12-08 1239
本文介绍了基于SpringBoot+Vue的旅游信息推荐系统和学生成绩管理系统开发项目。系统采用前后端分离架构，后端使用SpringBoot框架简化企业级开发，前端采用Vue.js实现响应式界面，数据库选用MySQL。文章详细说明了系统设计原则、技术选型理由，并提供了代码示例和测试案例。项目包含完整功能演示视频，所有源码经过验证可正常运行。同时提供最新计算机毕业设计选题参考，文末附有源码获取方式。系统适用于大学生项目实战开发，具有模块化设计、安全性强等特点。
从一次增删改操作开始：彻底理解 MySQL Buffer Pool 的地位与作用
soft2001525的博客
12-11 1365
它是 InnoDB 的核心内存引擎，是所有数据读写的唯一入口，是数据库性能与安全性的关键支撑。理解 Buffer Pool 的逻辑，你就理解了 MySQL 的一半。redo logundo log（事务回滚）MVCC脏页、刷盘策略自适应哈希索引B+树索引加载机制查询优化都与 Buffer Pool 有直接关系。如果你想系统搞懂 MySQL，从 Buffer Pool 开始是最佳路径。如果本篇文章对你有帮助，欢迎：✏️ 评论交流。
Qt6.5.3 mingw64 Ninja编译oracle oci驱动
最新发布
小蝈蝈的博客
12-12 311
2.将sdk和basic的内容复制到一起，basic中的instantclient_xx_x目录下的内容，sdk的instantclient_xx_xx目录下的内容。├── include/ ← 头文件（来自 sdk/include）到 自己的项目的运行路径下的**/plugins/sqldrivers/**└── sdk/ ← 原始目录（可保留，但非必需）3.将oci.dll生成mingw64支持的.a库。4.切换到Qt源码中的路径下，我的路径。
小白安装Redis
2201_75999403的博客
12-11 529
简单亲测无痛安装redis
Windows 64位安装MySQL5.7.44
宁德的小码农
12-09 565
本文提供了MySQL 5.7.44 64位版本在Windows系统下的详细安装配置指南。主要内容包括：从官方下载MySQL压缩包并解压到指定目录；创建my.ini配置文件，包含字符集设置、性能优化参数、日志配置等关键选项；通过命令行初始化数据库并记录临时密码；安装MySQL服务并启动；使用临时密码登录后修改root密码；最后验证分区模块是否启用。配置文件中特别优化了InnoDB缓冲池大小、查询缓存等参数，适合中大型应用场景，同时提供了日志记录和严格SQL模式等安全设置。
java面试:怎么保证消息队列当中的消息丢失、重复问题？
2301_80939853的博客
12-11 785
在面试的过程之中，假设你在简历当中填写了mq的相关技术，那面试官大概率会考察这方面的问题来看看你对mq相关知识的掌握程度，小编在这一块也被拷打过，今天就和大家一起来了解一下这方面的知识，希望大家都有所提升。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值