项目场景:
利用ajax实现增删改查
问题描述:
ajax编写前台的时候,列表显示部分,表格显示不出来,但是可以获取到数据
list界面代码:
<head>
<title>书籍列表</title>
<script type="text/javascript">
$(function () {
getInfo();
})
function getInfo() {
$.ajax({
url:"<%=path%>/book/getInfo",
type:"post",
dataType:"json",
data:$("#form_list").serialize(),
success:function (page) {
var data = page.list;
var table = "";
table += "<table border='1px' width='100%'>";
table += "<tr>";
table +="<td><input type='button' value='反选' οnclick='reverse()'></td>";
table += "<td>书籍ID</td>";
table += "<td>书籍名称</td>";
table += "<td>价格</td>";
table += "<td>出版日期</td>";
table += "<td>图片</td>";
table += "<td>书籍简介</td>";
table += "<td>操作</td>";
table += "</tr>"
for(var i = 0 ; i < data.length; i++){
table += "<tr>";
table += "<td><input type='checkbox' name='box' value='" + data[i].bid +" ' /> + "</td>";
table += "<td>" + data[i].bid + "</td>";
table += "<td>" + data[i].bname + "</td>";
table += "<td>" + data[i].bprice + "</td>";
table += "<td>" + data[i].bdate + "</td>";
table += "<td>" + data[i].bsrc + "</td>";
table += "<td>书籍简介</td>";
table += "<td>" +
"<a href='<%=path%>/book/updateById/" + data[i].bid + "'>修改</a> || " +
"<a href='<%=path%>/book/deleteById/" + data[i].bid + "'>删除</a>" +
"</td>";
table += "</tr>"
}
table += "</table>";
//循环将数据放入div
$("#div_id").html(table);
install_page(page);
},
error:function (result) {
console.log(result);
alert("网络异常");
}
})
}
function toAdd() {
location.href="<%=path%>/book/toAdd";
}
</script>
</head>
<body>
<form id="form_list">
<%--增删改模糊查询的按钮--%>
书名:<input type="text" name="bname" />
<input type="button" value="搜索" onclick="getInfo()"><br>
<input type="button" value="添加" onclick="toAdd()"> ||
<input type="button" value="批量删除" onclick="deleteBacth()"><br>
<%--存放列表--%>
<div id="div_id"></div>
<%--引入分页--%>
<jsp:include page="<%=path%>/common/page.jsp"></jsp:include>
</form>