Ajax

最新推荐文章于 2024-09-06 22:57:14 发布

gaokangjie

最新推荐文章于 2024-09-06 22:57:14 发布

阅读量86

点赞数

分类专栏： Web 文章标签： jquery jstl ajax jsp bootstrap

本文链接：https://blog.csdn.net/gaokangjie/article/details/104410578

版权

Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

                    
                        
                    
                    案例 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>
 

                

gaokangjie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax

案例 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...
复制链接

扫一扫

专栏目录