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

    @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.mfbz.cn/a/368793.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2024济南生物发酵展:会议日程安排和技术装备亮点预告

2024济南发酵展/2024生物发酵展/2024山东发酵展/2024济南生物制药展/2024生物技术展/2024食品设备展/2024食品加工展/2024济南细胞工程展 由中国生物发酵产业协会主办&#xff0c;上海信世展览服务有限公司承办的2024第12届国际生物发酵产品与技术装备展览会&#xff08;济南&a…

深入理解Istio服务网格数据平面Envoy

一、服务网格概述(service mesh) 在传统的微服务架构中&#xff0c;服务间的调用&#xff0c;业务代码需要考虑认证、熔断、服务发现等非业务能力&#xff0c;在某种程度上&#xff0c;表现出了一定的耦合性 服务网格追求高级别的服务流量治理能力&#xff0c;认证、熔断、服…

2023.12 淘天-数科 已offer

文章目录 岗位信息1面ld 12.17 1H2面 VP 12.18 40min3面 HR 12.2012.21offer薪资方案沟通 岗位信息 1面ld 12.17 1H &#xff08;是一个从业估计很长时间前辈&#xff0c;很平和&#xff0c;感觉能学到很多东西&#xff09; 自我介绍项目深究1.说下自己工作里最有成就感的事和…

图论练习3

内容&#xff1a;过程中视条件改变边权&#xff0c;利用树状数组区间加处理 卯酉东海道 题目链接 题目大意 个点&#xff0c;条有向边&#xff0c;每条边有颜色和费用总共有种颜色若当前颜色与要走的边颜色相同&#xff0c;则花费为若当前颜色与要走的边颜色不同&#xff0c;…

MYSQL——MySQL8.3无法启动

在新电脑上装了个MySQL&#xff0c;但是无法使用net start mysql启动&#xff0c;很是纳闷&#xff0c;使用mysqld --console去查看报错&#xff0c;也是没报错的&#xff0c;但是奇怪的是&#xff0c;我输入完这个mysqld --console之后&#xff0c;就等于启动了mysql了&#x…

第十一篇【传奇开心果系列】Python的OpenCV技术点案例示例:三维重建

传奇开心果短博文系列 系列短博文目录Python的OpenCV技术点案例示例系列短博文目录一、前言二、OpenCV三维重建介绍三、基于区域的SGBM示例代码四、BM(Block Matching)算法介绍和示例代码五、基于能量最小化的GC(Graph Cut)算法介绍和示例代码六、相机标定介绍和示例代码七…

【数据结构与算法】之排序系列-20240203

这里写目录标题 一、628. 三个数的最大乘积二、645. 错误的集合三、747. 至少是其他数字两倍的最大数四、905. 按奇偶排序数组五、922. 按奇偶排序数组 II六、976. 三角形的最大周长 一、628. 三个数的最大乘积 简单 给你一个整型数组 nums &#xff0c;在数组中找出由三个数组…

Leetcode刷题笔记题解(C++):36. 有效的数独

思路一&#xff1a;暴力破解&#xff0c;两个二维数组记录行、列对应的数字出现的次数&#xff0c;比如rows[i][index]表示的数字index在i行出现的次数&#xff0c;三维数组记录每个块中对应数字出现的次数&#xff0c;比如boxes[i/3][j/3][index]表示的数字index在[i/3][j/3]个…

Hugging Face推出自定义AI聊天Assistants;谷歌推出图像生成工具 ImageFX

&#x1f989; AI新闻 &#x1f680; 谷歌推出图像生成工具 ImageFX 摘要&#xff1a;谷歌在 Imagen 2 的基础上推出新的图像生成工具 ImageFX&#xff0c;通过简单的文字提示可以生成高质量图像。该工具包含了提示界面&#xff0c;让用户可以快速尝试创作和想法的相邻维度。…

数据结构—基础知识:哈夫曼树

文章目录 数据结构—基础知识&#xff1a;哈夫曼树哈夫曼树的基本概念哈夫曼树的构造算法哈夫曼树的构造过程哈夫曼算法的实现算法&#xff1a;构造哈夫曼树 数据结构—基础知识&#xff1a;哈夫曼树 哈夫曼树的基本概念 哈夫曼&#xff08;Huffman&#xff09;树又称最优树&…

通过 ChatGPT 的 Function Call 查询数据库

用 Function Calling 的方式实现手机流量包智能客服的例子。 def get_sql_completion(messages, model"gpt-3.5-turbo"):response client.chat.completions.create(modelmodel,messagesmessages,temperature0,tools[{ # 摘自 OpenAI 官方示例 https://github.com/…

ASP.NET Core 自定义解压缩提供程序

写在前面 在了解ASP.NET Core 自定义请求解压缩中间件的应用时&#xff0c;依据官方文档操作下来碰到了几个问题&#xff0c;这边做个记录。 关键点就是配置 Content-Encoding&#xff0c;参数需要和代码中添加的提供程序的Key保持一致&#xff1b; builder.Services.AddRequ…

问题:媒体查询语法中, 可用设备名参数表示“文档打印或预览“的是 #媒体#媒体#其他

问题&#xff1a;媒体查询语法中, 可用设备名参数表示"文档打印或预览"的是 A、C.?screen B.?projection C、A.?print D.?speech 参考答案如图所示

Unity DOTS中的baking(三)过滤baking的输出

Unity DOTS中的baking&#xff08;三&#xff09;过滤baking的输出 默认情况下&#xff0c;在conversation world&#xff08;baker和baking system运行的环境&#xff09;下产生的所有entities和components&#xff0c;都会作为baking环节的输出。在baking结束时&#xff0c;U…

使用Arcgis对欧洲雷达高分辨率降水数据重投影

当前需要使用欧洲高分辨雷达降水数据&#xff0c;但是这个数据的投影问题非常头疼。实际的投影应该长这样&#xff08;https://gist.github.com/kmuehlbauer/645e42a53b30752230c08c20a9c964f9?permalink_comment_id2954366https://gist.github.com/kmuehlbauer/645e42a53b307…

代码随想录刷题笔记 DAY 18 | 找树左下角的值 No.513 | 路经总和 No.112 | 从中序与后序遍历序列构造二叉树 No.106

Day 18 01. 找树左下角的值&#xff08;No. 513&#xff09; 题目链接 代码随想录题解 1.1 题目 给定一个二叉树的 根节点 root&#xff0c;请找出该二叉树的 最底层 最左边 节点的值。 假设二叉树中至少有一个节点。 示例 1: 输入: root [2,1,3] 输出: 1 示例 2: 输入…

网络安全挑战:威胁建模的应对策略与实践

在数字威胁不断演变的时代&#xff0c;了解和降低网络安全风险对各种规模的组织都至关重要。威胁建模作为安全领域的一个关键流程&#xff0c;提供了一种识别、评估和应对潜在安全威胁的结构化方法。本文将深入探讨威胁建模的复杂性&#xff0c;探索其机制、方法、实际应用、优…

国标GB/T 28181详解:设备视音频文件检索消息流程

目 录 一、设备视音频文件检索 二、设备视音频文件检索的基本要求 三、命令流程 1、流程图 2、流程描述 四、协议接口 五、产品说明 六、设备视音频文件检索的作用 七、参考 在国标GBT28181中&#xff0c;定义了设备视音频文件检索消息的流程&#xff0c;主…

深度学习实战 | 卷积神经网络LeNet手写数字识别(带手写板GUI界面)

引言 在深度学习领域&#xff0c;卷积神经网络&#xff08;Convolutional Neural Network, CNN&#xff09;是一种广泛应用于图像识别任务的神经网络结构。LeNet是一种经典的CNN结构&#xff0c;被广泛应用于基础的图像分类任务。本文将介绍如何使用LeNet卷积神经网络实现手写…

前端学习之路(3) JavaScript中的代理(Proxy)与反射(Reflect)

定义与概念 JavaScript中的Proxy与Reflect是ES6中引入的新特性&#xff0c;它们可以帮助我们更高效地控制对象。 代理&#xff08;Proxy&#xff09;是一种设计模式&#xff0c;它允许我们在访问对象的同时&#xff0c;添加一些额外的操作。代理对象与被代理对象实现相同的接…
最新文章