- 案例
allBook.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>图书列表</title> <%-- bootstrap --%> <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) --> <script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script> <script type="text/javascript"> $(function () { $.get("/book/allBooks", function (result) { // console.log(result); $.each(result, function (index, d) { let date = new Date(d.createdate); let Y = date.getFullYear(); let M = date.getMonth(); let D = date.getDate(); let H = date.getHours(); let m = date.getMinutes(); let s = date.getSeconds(); let dateStr = Y + "-" + M + "-" + D + " " + H + ":" + m + ":" + s; let aStr = "<a no='" + d.id + "'>" + d.id + "</a>"; $("table").append("<tr><td>" + aStr + "</td><td>" + d.name + "</td><td>" + d.Press + "</td><td>" + dateStr + "</td></tr>"); $("a").click(function () { let id = $(this).attr("no"); // console.log(id); $.get("/book/queryById", "id=" + id, function (book) { // console.log("图书信息: " + book); $("#bookId").html(book.id); $("#bookName").html(book.name); $("#bookPress").html(book.Press); $("#bookDetail").html(book.detail); }) }) }) }); }); </script> </head> <body> <div class="container"> <div> <table> <tr> <td>id</td> <td>书名</td> <td>出版社</td> <td>出版日期</td> </tr> </table> <h2>图书详情</h2> <table> <tr> <td>id</td> <td id="bookId"></td> </tr> <tr> <td>书名</td> <td id="bookName"></td> </tr> <tr> <td>出版社</td> <td id="bookPress"></td> </tr> <tr> <td>图书介绍</td> <td id="bookDetail"></td> </tr> </table> </div> </div> </body> </html>
Ajax
最新推荐文章于 2024-09-06 22:57:14 发布