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选择器 应用 五.通配符选择器 应用 六.总结

20240203作业

第二章 引用内联重载 一&#xff0e;选择题 1、适宜采用inline定义函数情况是&#xff08; C &#xff09; A. 函数体含有循环语句 B. 函数体含有递归语句 C. 函数代码少、频繁调用 D. 函数代码多、不常调用 2、假定一个函数为A(int i4, int j0) {;}, 则执行“A (1);”…

gRPC使用详解

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

训练模型过程中优雅的指定GPU

目前训练模型大部分在单机多卡的环境下&#xff0c;我们通常会指定一个GPU来训练模型。在不指定GPU情况下&#xff0c;默认使用GPU0来训练&#xff0c;但是很不巧GPU0被别人占了一半显存&#xff0c;导致OOM错误。每次跑模型都要去看下哪张卡显存最大&#xff0c;然后再来修改代…

假期作业2

进程间的7种通信方式&#xff1a; 1、无名管道&#xff1a; 即没有名字的管道&#xff0c;是一个特殊的文件&#xff0c;并且存储在内存上&#xff0c;不在文件系统中展示。只能适用于亲缘进程间的通信&#xff0c;需要在fork之前将管道文件打开&#xff0c;创建子进程后&…

【成品论文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…

c语言游戏实战(8):飞机大作战

前言&#xff1a; 飞机大作战游戏是一种非常受欢迎的射击类游戏&#xff0c;玩家需要控制一架战斗机在屏幕上移动&#xff0c;击落敌机以获得分数。本游戏使用C语言编写&#xff0c;旨在帮助初学者了解游戏开发的基本概念和技巧。 在开始编写代码之前&#xff0c;我们需要先了…

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

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

leetcode121. 买卖股票的最佳时机

Problem: 121. 买卖股票的最佳时机 文章目录 题目思路1思路2 题目 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计…

python爬虫6—高性能异步爬虫

如果有多个URL等待我们爬取&#xff0c;我们通常是一次只能爬取一个&#xff0c;爬取效率低&#xff0c;异步爬虫可以提高爬取效率&#xff0c;可以一次多多个URL同时同时发起请求 异步爬虫方式&#xff1a; 一、多线程、多进程&#xff08;不建议&#xff09;&#xff1a;可以…

计算机科学导论(2)计算机如何存储音频

文章目录 0. 声音的物理特性1. 音频采集2. 模拟到数字转换(A/D转换)3. 编码和压缩4. 存储音频存储是指将声音信号转换为数字形式并保存在存储介质上的过程。这一过程涉及到声音的采集、模拟到数字的转换(A/D转换)、编码和最终存储。现代音频存储技术使得我们能够以高保真度…

HarmonyOS案例:摇杆游戏

本案例主要演示如何通过一系列的动画效果以及运算实现摇杆控制组件同步运动的功能&#xff0c;界面简陋无需在意。 欢迎大家的阅读和评价&#xff0c;也欢迎大佬们批评、指正&#xff0c;我将继续努力&#xff0c;奉上更加专业的、高效的代码案例。 import curves from ohos.c…

Objective-C中里氏替换原则

里氏替换原则是面向对象设计的基本原则之一&#xff0c;它指出子类对象可以在任何需要父类对象的地方使用&#xff0c;而不会产生意外的行为。 // 父类 interface Animal : NSObject - (void)sayHello; endimplementation Animal - (void)sayHello {NSLog("Animal says he…