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 点击查询图书即可进入该页面测试
