$.ajax({
url: "/selectAllBook",
success: function (data) {
var str = '<table border="1">' +
' <thead>' +
' <tr>' +
' <th>图书编号</th>' +
' <th>图书名称</th>' +
' <th>图书价格</th>' +
' <th>操作</th>' +
' </tr>' +
' </thead>' +
' <tbody>';
$.each(data, function (index, book) {
str += '<tr>' +
'<td>' + book.id + '</td>' +
'<td>' + book.bookName + '</td>' +
'<td>' + book.bookPrice + '</td>' +
'<td>' + "修改 删除" + '</td>' +
'</tr>';
})
str += ' </tbody>' +
'</table>';
$("#detail").html(str);
},
dataType:"json"
});
==========================================================================================================
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"> <head> <meta charset="UTF-8"/> <title>Title</title> </head> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { $("#f").hide(); $("#select").click(function () { //发送ajax查询所有图书 $.ajax({ url: "/selectAllBook", success: function (data) { var str = '<table align="center" border="1">' + ' <thead>' + ' <tr>' + ' <th>图书编号</th>' + ' <th>图书名称</th>' + ' <th>图书价格</th>' + ' <th>操作</th>' + ' </tr>' + ' </thead>' + ' <tbody>'; $.each(data, function (index, book) { str += '<tr>' + '<td>' + book.id + '</td>' + '<td>' + book.bookName + '</td>' + '<td>' + book.bookPrice + '</td>' + '<td>' + '<a href="javascript:void(0)" οnclick="getBookDetail(' + book.id + ')">修改</a>' + '||' + '<a href="javascript:void(0)" οnclick="deleteBook(' + book.id + ')">删除</a>' + '</td>' + '</tr>'; }) str += ' </tbody>' + '</table>'; $("#detail").html(str); }, dataType: "json" }); }); $("#insert").click(function () { $("#f").toggle(); }); $("#add").click(function () { var bookName = $("#f input:eq(0)").val(); var bookPrice = $("#f input:eq(1)").val(); $.ajax({ url: "insertBook", data: {"bookName": bookName, "bookPrice": bookPrice}, success: function (result) { if (result == "success") { //添加图书成功 alert("添加图书成功,请点击查询所有图书!") } } }); }); }); function deleteBook(id) { $.ajax({ url: "delete?id=" + id, success: function (result) { if (result == "success") { //删除图书成功 alert("删除图书成功,请点击查询所有图书!") } } }); } function getBookDetail(bookId) { $.ajax({ url: "getBook?id=" + bookId, success: function (data) { $("#dd").html('<form id="f2">\n' + ' <input type="hidden" name="id" value="' + data.id + '"/><br/>\n' + ' bookName:<input type="text" name="bookName" value="' + data.bookName + '"/><br/>\n' + ' bookPrice:<input type="text" name="bookPrice" value="' + data.bookPrice + '"/><br/>\n' + ' <a href="javascript:void(0)" οnclick="update()">update</a>\n' + '</form>'); } }) } function update() { var id = $("#f2 input:eq(0)").val(); var bookName = $("#f2 input:eq(1)").val(); var bookPrice = $("#f2 input:eq(2)").val(); $.ajax({ url: "updateBook", data: {"id":id,"bookName": bookName, "bookPrice": bookPrice}, success: function (result) { if (result == "success") { alert("更新图书成功,请点击查询所有图书!") } } }) } </script> <body> <p align="center"><a href="javascript:void(0)" id="select">查询所有图书</a> || <a href="javascript:void(0)" id="insert">添加图书</a></p> <div id="detail"> </div> <hr/> <form id="f"> bookName:<input type="text" name="bookName"/><br/> bookPrice:<input type="text" name="bookPrice"/><br/> <input type="button" id="add" value="insert"/> </form> <div id="dd"></div> </body> </html>