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>