html代码
<div style="width: 80%;text-align: center;margin:0 auto;">
<table id="tt" style="width: 100%; text-align:center;"cellspacing="0" cellpadding="0">
<tr >
<th>id</th>
<th>图书名称</th>
<th>图书价格</th>
<th>图书库存</th>
<th>已售出数量</th>
<th>已借出数量</th>
</tr>
</table>
</div>
这是固定的顶部样式,我们希望根据我们查询出的结果在下方显示出图书的对应信息
Js代码
$.ajax({
type: "post",
url: "book?action=select",
data: {},
dataType: "json",
contentType: "application/x-www-form-urlencoded; charset=utf-8",//编码格式
success: function (data) {
for (var i in data) {//data为java传过来的数据,我们循环读取并写成代码
var tab = '<tr>' +
'<td>' + data[i].book_id + '</td>' +
'<td>' + data[i].book_name + '</td>' +
'<td>' + data[i].book_price + '</td>' +
'<td>' + data[i].book_stock + '</td>' +
'<td>' + data[i].book_sell + '</td>' +
'<td>' + data[i].book_lend + '</td>' +
'</tr>';
$("#tt").append(tab); //根据table标签的id写入代码,append是在原有代码的结尾追加新的代码
}
}
})
这是结果界面
Java代码
List<Book_Bean> Book_List = new ArrayList<Book_Bean>();
Book_List = book.select1(con,book_name); //将我们的查询结果放入Book_List
PrintWriter pw = response.getWriter();
String json = JSONArray.fromObject(Book_List).toString(); //将结果转为Json格式
pw.print(json);//通过ajax传给页面
可以访问该网址进行实例测试,点击查询图书即可
https://www.nevergiveu.com/book/index.jsp
点击查询图书即可进入该页面测试