bootstrap的模式窗体实现修改

大家知道bootstrap中有个模式窗体，它可以实现ajax的数据操作，官方的文档中只是给出了如何实现，并没有给出在实际生产中如何使用，以下是最近教学过程中对model窗体的具体实现，希望有需要的读者可以参考一下。

首先，页面导入所需的js文件和css文件，代码如下：

<link href="<%=request.getContextPath()%>/css/bootstrap.min.css" rel="stylesheet">
<script src="<%=request.getContextPath()%>/js/jquery-3.5.1.min.js"></script>
<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>

页面主体部分：

<table class="table table-hover table-bordered">
            <tr>
                <td>
                    <input type="checkbox" id="all" onclick="fun()">全选
                    <button class="btn-secondary" onclick="batch_del()">批量删除</button>
                </td>
                <td>序号</td><td>编号</td><td>书名</td><td>作者</td>
                <td>价格</td>
                <c:if test="${logUser.role==1}">
                <td>
                    <button class="btn-primary" data-toggle="modal" data-target="#myModal">
                        添加
                    </button>
                </td>
                </c:if>
            </tr>
            <c:forEach items="${pager.datas}" var="book" varStatus="abc">
                 <tr>
                     <td>
                         <input type="checkbox" name="chk" value="${book.id}">
                     </td>

                     <td>${abc.count}</td>
                     <td>${book.id}</td>
                     <td>${book.title}</td>
                     <td>${book.author}</td>
                     <td>${book.price}</td>
                     <c:if test="${logUser.role==1}">
                     <td>
                         <button class="btn-del" value="${book.id}">删除</button>
                         <button class="btn-primary" data-toggle="modal" data-target="#myModal${book.id}">
                             修改
                         </button>

                     </td>
                     </c:if>
                     <div class="modal fade" id="myModal${book.id}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                         <div class="modal-dialog">
                             <div class="modal-content">
                                 <div class="modal-header">
                                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                     <h4 class="modal-title" id="myModalLabel">编辑图书</h4>
                                 </div>
                                 <form action="save" method="post">
                                 <div class="modal-body">

                                         <input type="hidden" name="id" value="${book.id}">
<%--                                         <input type="hidden" name="token" value="<%=System.currentTimeMillis()%>">--%>
                                         书名：<input type="text" name="title" value="${book.title}"><br>
                                         作者：<input type="text" name="author" value="${book.author}"><br>
                                         单价：<input type="text" name="price" value="${book.price}"><br>

                                 </div>
                                 <div class="modal-footer">
                                     <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                     <button class="btn-success">提交</button>
                                 </div>
                                 </form>
                             </div><!-- /.modal-content -->
                         </div><!-- /.modal-dialog -->
                     </div><!-- /.modal -->
                 </tr>
            </c:forEach>
             <tr>
                 <td colspan="10" align="center">
                     每页<select id="sel">
                           <c:forEach begin="5" end="20" step="5" var="i">
                                <option value="${i}" ${size==i ? 'selected':''}>${i}</option>
                           </c:forEach>
                 </select>条。
                     ${pager.getItems()}
                     <input type="text" name="currentPage" size="2"> <input type="button" class="go" value="go">
                 </td>
             </tr>
        </table>

执行效果：