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

news2024/12/27 13:15:10

目录

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;
    }

    @Override
    public 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 {


    // 书本列表
    @Override
    public 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而非prestatement

        ResultSet 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 {

    @Override
    protected 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();
            // 转换为json
            String json = gson.toJson(books);
            // 设置响应类型，指定为json
            resp.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);
        }

    }

    @Override
    protected 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.coloradmin.cn/o/1430407.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Vulnhub billu b0x

Vulnhub billu b0x

0x01 环境搭建 1. 从官方下载靶机环境&#xff0c;解压到本地&#xff0c;双击OVF文件直接导入到vmware虚拟机里面。2. 将虚拟机的网络适配器调成NAT模式&#xff0c;然后开机即可进行操作了。 0x02 主机发现 nmap -sn 192.168.2.0/24 成功获取靶机IP为192.168.2.129。 0x0…
阅读更多...
网络时间协议NTP工作模式

网络时间协议NTP工作模式

单播服务器/客户端模式 单播服务器/客户端模式运行在同步子网中层数较高层上。这种模式下，需要预先知道服务器的IP地址。 客户端：运行在客户端模式的主机（简称客户端）定期向服务器端发送报文，报文中的Mode字段设置为3（客户端模式）。当客户端接收到应答报文时，客户端会…
阅读更多...
指针2 1月31日学习笔记

指针2 1月31日学习笔记

一、strncpy、strncmp、strncat函数 strncpy函数用于将一个字符串的一部分拷贝到另一个字符串中。 char* strncpy(char *dest, const char *src, size_t n){size_t i;for (i 0; i < n && src[i] ! \0; i)dest[i] src[i];for ( ; i < n; i)dest[i] \0;return …
阅读更多...
2024牛客寒假算法基础集训营1部分题解

2024牛客寒假算法基础集训营1部分题解

// 能力有限&#xff0c;做多少发多少。 A-DFS搜索 题目描述 最近&#xff0c;fried-chicken完全学明白了DFS搜索&#xff08;如上图所示&#xff09;&#xff01;于是学弟向他请教DFS搜索&#xff0c;fried-chicken热心的进行了讲解&#xff1a; 所谓DFS搜索&#xff0c;就…
阅读更多...
上海纽约大学信息技术部高级主任常潘：解密大数据引领的未来教育革命

上海纽约大学信息技术部高级主任常潘：解密大数据引领的未来教育革命

大数据产业创新服务媒体 ——聚焦数据 改变商业 在数字化时代&#xff0c;大数据技术的应用已经深刻地改变着各行各业。特别是在教育领域&#xff0c;智慧校园建设作为现代化校园的代名词&#xff0c;正迎来大数据技术的巨大机遇。 1月17日&#xff0c;上海纽约大学信息技术部…
阅读更多...
嵌入式软件工程师面试题——嵌入式专题(五十二)

嵌入式软件工程师面试题——嵌入式专题(五十二)

说明&#xff1a; 面试群&#xff0c;群号&#xff1a; 228447240面试题来源于网络书籍&#xff0c;公司题目以及博主原创或修改&#xff08;题目大部分来源于各种公司&#xff09;&#xff1b;文中很多题目&#xff0c;或许大家直接编译器写完&#xff0c;1分钟就出结果了。但…
阅读更多...
EtherCAT转ModbusTCP网关

EtherCAT转ModbusTCP网关

一、功能概述 1.1设备简介 本产品是EtherCAT和Modbus TCP网关&#xff0c;使用数据映射方式工作。 本产品在EtherCAT侧作为EtherCAT从站&#xff0c;接TwinCAT、CodeSYS、PLC等&#xff1b;在ModbusTCP侧做为ModbusTCP主站&#xff08;Client&#xff09;或从站&#xff08;…
阅读更多...
【蓝桥杯冲冲冲】[NOIP2003 普及组] 数字游戏

【蓝桥杯冲冲冲】[NOIP2003 普及组] 数字游戏

蓝桥杯备赛 | 洛谷做题打卡day25 文章目录 蓝桥杯备赛 | 洛谷做题打卡day25[NOIP2003 普及组] 数字游戏题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示思路 题解代码我的一些话 [NOIP2003 普及组] 数字游戏 题目描述 丁丁最近沉迷于一个数字游戏之中。这个游戏看…
阅读更多...
MySQL for update锁表还是锁行校验

MySQL for update锁表还是锁行校验

select * from user where id 1 for update ; 1. for update作用 在MySQL中&#xff0c;使用for update子句可以对查询结果集进行行级锁定&#xff0c;以便在事务中对这些行进行更新或者防止其他事务对这些行进行修改。 当使用for update时&#xff0c;锁定行的方式取决于wh…
阅读更多...
【初中生讲机器学习】4. 支持向量机算法怎么用？一个实例带你看懂！

【初中生讲机器学习】4. 支持向量机算法怎么用？一个实例带你看懂！

创建时间&#xff1a;2024-02-02 最后编辑时间&#xff1a;2024-02-03 作者&#xff1a;Geeker_LStar 你好呀~这里是 Geeker_LStar 的人工智能学习专栏&#xff0c;很高兴遇见你~ 我是 Geeker_LStar&#xff0c;一名初三学生&#xff0c;热爱计算机和数学&#xff0c;我们一起加…
阅读更多...
【八大排序】冒泡排序 | 快速排序 + 图文详解！！

【八大排序】冒泡排序 | 快速排序 + 图文详解！！

&#x1f4f7; 江池俊&#xff1a; 个人主页 &#x1f525;个人专栏&#xff1a; ✅数据结构冒险记 ✅C语言进阶之路 &#x1f305; 有航道的人&#xff0c;再渺小也不会迷途。 文章目录 交换排序一、冒泡排序1.1 算法步骤 动图演示1.2 冒泡排序的效率分析1.3 代码实现1.4 …
阅读更多...
HSRP配置指南

HSRP配置指南

实验大纲 第 1 部分&#xff1a;验证连通性 步骤 1&#xff1a;追踪从 PC-A 到 Web 服务器的路径 步骤 2&#xff1a;追踪从 PC-B 到 Web 服务器的路径 步骤 3&#xff1a;观察当 R3 不可用时&#xff0c;网络的行为 第 2 部分&#xff1a;配置 HSRP 主用和 备用路由器 步…
阅读更多...
【Crypto | CTF】BUUCTF rsarsa1

【Crypto | CTF】BUUCTF rsarsa1

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

公交最短距离-算法

题目 给定一个一维数组&#xff0c;其中每一个元素表示相邻公交站之间的距离&#xff0c;比如有四个公交站A,B,C,D&#xff0c;对应的距离数组为&#xff0c;1,2,3,4&#xff0c;如下图示 给定目标站X和Y&#xff0c;求他们之间最短的距离 解题 遍历一次整个数组&#xff0c;…
阅读更多...
考研/计算机二级数据结构刷题之顺序表

考研/计算机二级数据结构刷题之顺序表

目录 第一题 顺序表的初始化&#xff0c;销毁&#xff0c;头插&#xff0c;尾插&#xff0c;头删&#xff0c;尾删&#xff0c;指定位置插入&#xff0c;指定删除以及打印 第二题 移除元素 题目链接&#xff1a; OJ链接 题目详解&#xff1a;移除元素 第三题&#xff1a;删…
阅读更多...
回溯法：回溯法通用模版汇总以及模版应用

回溯法：回溯法通用模版汇总以及模版应用

从一个问题开始 给定两个整数 n 和 k&#xff0c;返回 1 ... n 中所有可能的 k 个数的组合。 示例: 输入: n 4, k 2 输出: [ [2,4], [3,4], [2,3], [1,2], [1,3], [1,4] ] 很容易想到 用两个for循环就可以解决。 如果n为100&#xff0c;k为50呢&#xff0c;那就50层for循…
阅读更多...
问题：测风站应设置在平直的巷道中，其前后（）范围内不得有障碍物和拐弯等局部阻力。 #微信#媒体

问题：测风站应设置在平直的巷道中，其前后（）范围内不得有障碍物和拐弯等局部阻力。 #微信#媒体

问题&#xff1a;测风站应设置在平直的巷道中&#xff0c;其前后&#xff08;&#xff09;范围内不得有障碍物和拐弯等局部阻力。 参考答案如图所示
阅读更多...
U盘里的东西刚存进去就没了怎么回事？怎么办

U盘里的东西刚存进去就没了怎么回事？怎么办

U盘里的东西刚存进去就没了怎么办&#xff1f;U盘是我们平时常用的存储设备之一&#xff0c;但有时候会出现一些问题。其中之一就是将东西存进去后&#xff0c;发现数据竟然消失了。这是一个令人困扰的问题&#xff0c;可能会导致我们的重要文件丢失。在本文中&#xff0c;我们…
阅读更多...
RT-Thread线程管理(使用篇)

RT-Thread线程管理(使用篇)

layout: post title: “RT-Thread线程管理” date: 2024-1-26 15:39:08 0800 tags: RT-Thread 线程管理(使用篇) 之后会做源码分析 线程是任务的载体&#xff0c;是RTT中最基本的调度单位。 线程执行时的运行环境称为上下文&#xff0c;具体来说就是各个变量和数据&#xff0c…
阅读更多...
利用OpenCV实现物流与生产线自动化的革命性突破

利用OpenCV实现物流与生产线自动化的革命性突破

背景介绍&#xff1a; 在当今高度自动化的时代&#xff0c;物流和生产线上的每一个环节都关乎企业的核心竞争力。传统的生产方式往往依赖于人工检测和操作&#xff0c;这不仅效率低下&#xff0c;而且容易出错。为了解决这一问题&#xff0c;越来越多的企业开始寻求利用计算机视…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023