ajax刷新局部，前台遍历list方法

通过ajax请求获取的list无法直接用c:foreach标签直接遍历，需要单独做处理，由于c:foreach在前端会别解析成html，所以ajax是无法获取到c:foreach这个标签的。所以我们需要手动做拼接html的处理

我这里给出我的页面局部的例子：显示用c:foreach展示后台传出来的数据

 <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this" id="booklistname">所有书籍</li>
            </ul>
            <div class="layui-tab-content">
                <br><br>
                <div class="layui-tab-item layui-show" id="listbook">
                    <c:forEach items="${BookList}" var="BookList">
                        <div style="float:left;margin-left:20px;">
                            <img class="layui-upload-img" src="${BookList.bookphoto}" width="100"
                                 height="150" href="/admin/book/findbook?bookId?=${BookList.bookId}"><br/>
                            <h5 style="width:100px; overflow:hidden; text-align: center; white-space:nowrap; text-overflow:ellipsis;">${BookList.bookname} </h5>
                        </div>

                    </c:forEach>
                </div>

            </div>
        </div>

后台需要用@ResponseBody这个注解

@RequestMapping("/seachBook")
    @ResponseBody
    public List<Book> seachBook(String bookname){
        Map<String,Object> map=new HashMap<>();
        map.put("bookname",bookname);
        List<Book> bookList= bookService.BookList(map);
        return bookList;
    }

通过ajax后后台传出数据

function findbooktagId(booktagId, booktagname) {
            $.ajax({
                async: false,
                type: "post",
                url: '/admin/book/findbooktagId?booktagId=' + booktagId,
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    document.getElementById("booklistname").innerHTML = booktagname + "类型所有书籍";
                    $("#listbook").empty();
                    for (var i = 0; i < data.length; i++) {
                        var a = '<div style="float:left;margin-left:20px;">\n' +
                            '                           <img class="layui-upload-img" src="' + data[i].bookphoto + '" id="" width="100"\n' +
                            '                                height="150" href="/admin/book/findbook?bookId?=' + data[i].bookId + '"><br/>\n' +
                            '                           <h5 style="width:100px; overflow:hidden; text-align: center; white-space:nowrap; text-overflow:ellipsis;">' + data[i].bookname + '</a>\n' +
                            '                       </div>';
                        $("#listbook").append(a);
                    }
                },
                error: function () {
                    layui.msg("数据获取失败！");
                }
            });
        }

通过ajax局部刷新list就完成了