Servlet+Ajax实现对数据的列表展示(极简入门)

目录

1.准备工作

1.数据库源(这里以Mysql为例)

2.映射实体类

3.模拟三层架构(Dao、Service、Controller)

Dao接口

Dao实现

Service实现(这里省略Service接口)

Controller层(或叫Servlet层)

web.xml中注册该Servket


1.准备工作

1.数据库源(这里以Mysql为例)

<!--    数据库依赖--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.47</version></dependency>

因为是Servlet项目,所以要用到JDBC去连接后台数据库,此处还不熟悉的可借鉴我前几篇有关JDBC的文章

这里直接给出工具类JdbcUtil2:

public class JdbcUtil2 {private static String url;private static String username;private static String password;private static String driver;static {InputStream is = JdbcUtil2.class.getClassLoader().getResourceAsStream("db.properties");Properties pro = new Properties();try {pro.load(is);} catch (IOException e) {throw new RuntimeException(e);}url = pro.getProperty("url");username = pro.getProperty("username");password = pro.getProperty("password");driver = pro.getProperty("driver");}public static Connection getConnection() throws SQLException, ClassNotFoundException {Class.forName(driver);  // 显示加载驱动return (Connection) DriverManager.getConnection(url,username,password); // 拿到连接}public static Statement getStatement(Connection connection) throws SQLException {Statement statement = connection.createStatement();return statement;}public static ResultSet getResultSet(Statement statement) throws SQLException {ResultSet resultSet = statement.executeQuery("select * from book");return resultSet;}public static void close(Connection connection,Statement statement,ResultSet resultSet) throws SQLException {if(resultSet!=null){resultSet.close();resultSet = null;}if(statement!=null){statement.close();statement = null;}if(connection!=null){connection.close();connection = null;}}public static void main(String[] args) throws SQLException, ClassNotFoundException {Connection connection = JdbcUtil2.getConnection();Statement statement = JdbcUtil2.getStatement(connection);ResultSet resultSet = JdbcUtil2.getResultSet(statement);while(resultSet.next()){int id = resultSet.getInt("id");String name = resultSet.getString("name");double price = resultSet.getDouble("price");System.out.println("id="+id+",name="+name+",price="+price);}JdbcUtil2.close(connection,statement,resultSet);}
}

2.映射实体类

(这里我对应的数据库表是Book,所以创建实体类Book)

(这是简单的表设计,大家可直接模拟一个,或自行创建一个表,只要实体类对应上即可)

public class Book {private int id;private String name;private double price;public Book(int id, String name, double price) {this.id = id;this.name = name;this.price = price;}public Book() {}public int getId() {return id;}public void setId(int id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public double getPrice() {return price;}public void setPrice(double price) {this.price = price;}@Overridepublic String toString() {return "Book{" +"id=" + id +", name='" + name + '\'' +", price=" + price +'}';}
}

3.模拟三层架构(Dao、Service、Controller)

Dao接口
public interface BookDao {// 书本列表public List<Book> bookList() throws SQLException, ClassNotFoundException;}
Dao实现
public class BookDaoImpl implements BookDao {// 书本列表@Overridepublic List<Book> bookList() throws SQLException, ClassNotFoundException {List<Book> books = new ArrayList<Book>();Connection connection = JdbcUtil2.getConnection();// 注意这里的JdbcUtil2是自己封装好的JDBC工具类Statement statement = JdbcUtil2.getStatement(connection);// 此处为了简便,不考虑sql注入,因此直接用statement而非prestatementResultSet resultSet = JdbcUtil2.getResultSet(statement);// 获取结果集while(resultSet.next()){// 循环拿到每本书的信息,并存在每个新创建的book对象中Book book = new Book();book.setId(resultSet.getInt("id"));book.setName(resultSet.getString("name"));book.setPrice(resultSet.getDouble("price"));books.add(book);// 添加每本书本信息在集合}return books; // 返回该集合}}
Service实现(这里省略Service接口)
public class BookService {public List<Book> getAllbooks() throws SQLException, ClassNotFoundException {BookDao bookDao = new BookDaoImpl();return bookDao.bookList();}
}
Controller层(或叫Servlet层)
public class BookServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {List<Book> books = new ArrayList<Book>();BookService bookService = new BookService();try {books = bookService.getAllbooks();// 调用Service层,拿到books集合Gson gson = new GsonBuilder().create();// 转换为jsonString json = gson.toJson(books);// 设置响应类型,指定为jsonresp.setContentType("application/json");// 指定字符集resp.setCharacterEncoding("UTF-8");// 返回数据resp.getWriter().write(json);} catch (SQLException e) {throw new RuntimeException(e);} catch (ClassNotFoundException e) {throw new RuntimeException(e);}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {super.doPost(req, resp);}}
web.xml中注册该Servket
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"version="4.0"><!--设置首页--><welcome-file-list><welcome-file>Content.jsp</welcome-file></welcome-file-list> <servlet><servlet-name>BookServket</servlet-name><servlet-class>zhan.controller.BookServlet</servlet-class></servlet><servlet-mapping><servlet-name>BookServket</servlet-name><url-pattern>/BookServlet</url-pattern></servlet-mapping></web-app>

编写Content.jsp(html+js+ajax)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>首页</title>
</head>
<body><h3>列表展示</h3><button id="listButton">书本信息列表</button><div id="bookList"></div><%--该div用于列表展示--%></body><%--引入jquery,用于调用ajax--%>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script>$(function (){$("#listButton").click(function (){$.ajax({url: "http://localhost:8080/BookServlet",type: "GET",success: function (response){  // 一般来说,response对响应体内容的封装,我们可以从中获取值var bookList = $("#bookList");bookList.empty(); // 清空列表response.forEach(function(book) {bookList.append("id:"+book.id+",name:"+book.name+",price"+book.price+"<br>");// 在response响应中遍历获取到的列表,以book为单位,不断填充在bookList这个div中        });},error: function (xhr, status, error) {alert("服务器异常!");}});});});
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/665387.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【blender插件】(1)快速开始

特性 blender的python API有如下特性: 编辑用户界面可以编辑的任意数据(场景,网格,粒子等)。修改用户首选项、键映射和主题。运行自己的配置运行工具。创建用户界面元素,如菜单、标题和面板。创建新的工具。场景交互式工具。创建与Blender集成的新渲染引擎。修改模型的数据…

LeetCode.1686. 石子游戏 VI

题目 题目链接 分析 本题采取贪心的策略 我们先假设只有两个石头a,b&#xff0c; 对于 Alice 价值分别为 a1,a2&#xff0c; 对于 Bob 价值而言价值分别是 b1,b2 第一种方案是 Alice取第一个&#xff0c;Bob 取第二个&#xff0c;Alice与Bob的价值差是 c1 a1 - b1&#xf…

【Crypto | CTF】BUUCTF rsarsa1

天命&#xff1a;第二题RSA解密啦&#xff0c;这题比较正宗 先来看看RSA算法 这道题给出了 p&#xff0c;q&#xff0c;E&#xff0c;就是给了两个质数和公钥 有这三个东西&#xff0c;那就可以得出私钥了 最后把私钥和质数放进去解密即可得到解密后的明文 from gmpy2 impor…

会计的记账凭证

目录 一. 记账凭证的填制与审核1.1 收付款凭证1.2 转账凭证1.3 单式记账凭证 二. 记账凭证的编号 \quad 一. 记账凭证的填制与审核 \quad \quad 1.1 收付款凭证 \quad 注意︰ 凡是涉及货币资金之间收付款的业务如将库存现金存入银行或从银行提取现金等类经济业务。在实际工作中…

程序员的悲哀:知名Python库requests作者失业了

在当今这个快速发展的科技时代&#xff0c;程序员作为创新的驱动力&#xff0c;一直被视为时代的宠儿。然而&#xff0c;即使在这样一个充满机会的领域&#xff0c;也有着不为人知的辛酸。近日&#xff0c;一个令人震惊的消息传遍了编程社区&#xff1a;知名Python库requests的…

css1基础选择器

大纲 一.标签选择器 比较简单&#xff0c;前面直接写目标标签 二.类选择器 应用 例子 三.多类名选择器&#xff08;调用时中间用空格隔开&#xff09; 四.id选择器 应用 五.通配符选择器 应用 六.总结

gRPC使用详解

起源特点主要优缺点应用场景组成部分使用方法SpringBoot集成gRPCVert.x集成gRPCNacos集成gRPC监控gRPC调用过程Java使用示例 起源 gRPC的起源可以追溯到2015年&#xff0c;当时谷歌发布了一款开源RPC框架&#xff0c;名为gRPC。gRPC的设计初衷是为了提供一种标准化、可通用和跨…

【成品论文30页】2024美赛C题完整1-4问完整解答+答疑服务+完整数据集代码

2024美赛C题 也包括心理和环境因素。理解这些因素对于运动员、教练和观众来说都至关重要&#xff0c;因为它们直接影响着比赛的结果和整体体验。 技术水平和体能因紊 网球比赛中得分的波动首先受到运动员的技术水平和体能因素的影响。技术水平高的运动员往往能够以更加精准和有…

UnityShader(十四)纹理

目录 前言&#xff1a; 单张纹理实现效果&#xff1a; 效果&#xff1a; 前言&#xff1a; 纹理最初的目的是用一张图片来控制模型的外观。使用纹理映射技术我们可以把一张图“贴”在模型表面&#xff0c;逐纹素&#xff08;文素的名字是为了和像素进行区分&#xff09;控制…

CentOS 7中搭建FTP文件共享服务器的完整步骤

CentOS 7中搭建FTP文件共享服务器的完整步骤 要求&#xff1a;设置不允许匿名用户登录&#xff0c;只允许本地用户登录&#xff0c;且将活动范围限制在其家目录。 系统环境&#xff1a; 服务器&#xff1a;172.20.26.167-CentOS7.6 客户端&#xff1a;172.20.26.24-CentOS7…

泰克示波器(TBS2000系列)触发功能使用讲解——边沿触发

# Trigger区域 触发区域用于对触发功能进行配置。示波器的触发功能用于采集&#xff08;Acquire&#xff09;那些在瞬间出现的信号&#xff0c;便于我们分析观察&#xff0c;此时可以当做逻辑分析仪使用。触发区域按钮包括&#xff1a;menu、Level\Force Trig三个。 目录 1.1 …

一篇文章了解系统眼中的键盘--以一个简单的系统分析从按键的输入到字符的显示

键盘输入 实现使用的设备 intel架构32位CPU, 思路为嵌入式系统工程师,使用的操作系统是《30天自制操作系统》里面的系统进行讲解 硬件实现 按键 使用单片机等的引脚可以获取电平状态从而获得按键的状态(单片机是一种集成到一块硅片上构成的一个小而完善的微型计算机系统, 用…

分享一个WPF项目

最近在学习WPF开发方式&#xff0c;找到一些项目进行拆解学习&#xff1b;本位主要分享一个WPF项目&#xff0c;叫做WPFDevelopers&#xff0c;在git上大约有1.3K星&#xff0c;话不多说&#xff0c;先看看效果&#xff1a; 这个项目开发可以编译启动后直接查看样例、Xaml、Cha…

《计算机网络简易速速上手小册》第9章:物联网(IoT)与网络技术(2024 最新版)

文章目录 9.1 IoT 架构与通信协议 - 打造智能世界的秘诀9.1.1 基础知识9.1.2 重点案例&#xff1a;使用 Python 和 MQTT 实现智能家居照明系统准备工作Python 脚本示例发布者&#xff08;灯光控制&#xff09;订阅者&#xff08;灯光状态接收&#xff09;&#xff1a; 9.1.3 拓…

快速Diff算法-Vue3

快速Diff算法 快速 Diff 算法在实测中性能最优。它借鉴了文本 Diff 算法中的预处理思路&#xff0c;先处理新旧两组子节点中相同的前置节点和相同的后置节点。当前置节点和后置节点全部处理完毕后&#xff0c;如果无法简单地通过挂载新节点或者卸载已经不存在的节点来完成更新…

AD24-Class、飞线、PCB Nets的管理及添加、层的管理

一、Class 1、Class介绍 2、Class添加与显示 ①添加 ②显示通过Panels-PCB&#xff0c;即可将创建的类显示再左上方窗口 3、Class的编辑管理 ①概述 ②颜色更改 二、飞线 1、概述 2、 飞线的打开、关闭 打开&#xff1a;Alt左上角滑动 N&#xff1a;可以针对性的显示和隐…

深度学习环境配置:Anaconda 安装和 pip 源

conda是一种通用包管理系统&#xff0c;与pip的使用类似&#xff0c;环境管理则允许用户方便地安装不同版本的python并可以快速切换。 Anaconda则是一个打包的集合&#xff0c;里面预装好了conda、某个版本的python、众多packages、科学计算工具等等&#xff0c;就是把很多常用…

Vue3 - 从 vue2 到 vue3 过渡,这一套就够了(案例 + 效果演示)(二)

目录 一、组合式 API 的使用 1.1、watch 函数 1.2、watchEffect 函数 1.3、toRef 和 toRefs 1.3.1、toRef 1.3.2、toRefs 1.4、vue3 的声明周期 一、组合式 API 的使用 1.1、watch 函数 与 vue2.x 中的 watch 配置功能一致&#xff0c;但是多了一些坑&#xff1a; 这…

【蓝桥杯】环形链表的约瑟夫问题

目录 题目描述&#xff1a; 输入描述&#xff1a; 输出描述&#xff1a; 示例1 解法一&#xff08;C&#xff09;&#xff1a; 解法二&#xff08;Cpp&#xff09;&#xff1a; 正文开始&#xff1a; 题目描述&#xff1a; 据说著名犹太历史学家 Josephus 有过以下故事&a…

Pytest测试用例参数化

pytest.mark.parametrize(参数名1,参数名2...参数n, [(参数名1_data1,参数名2_data1...参数名n_data1),(参数名1_data2,参数名2_data2...参数名n_data2)]) 场景&#xff1a; 定义一个登录函数test_login,传入参数为name,password&#xff0c;需要用多个账号去测试登录功能 # …