ajax编写前台的时候,列表显示部分,表格显示不出来,但是可以获取到数据

项目场景:

利用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>

错误显示:

在这里插入图片描述


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值