在html中使用ajax遍历服务器端返回json数据正确的遍历方式

$.ajax({
    url: "/selectAllBook",
    success: function (data) {
        var str = '<table border="1">' +
            '    <thead>' +
            '    <tr>' +
            '        <th>图书编号</th>' +
            '        <th>图书名称</th>' +
            '        <th>图书价格</th>' +
            '        <th>操作</th>' +
            '    </tr>' +
            '    </thead>' +
            '    <tbody>';
        $.each(data, function (index, book) {
            str += '<tr>' +
                '<td>' + book.id + '</td>' +
                '<td>' + book.bookName + '</td>' +
                '<td>' + book.bookPrice + '</td>' +
                '<td>' + "修改 删除" + '</td>' +
                '</tr>';
        })
        str += '    </tbody>' +
            '</table>';
        $("#detail").html(str);

    },
    dataType:"json"
});

==========================================================================================================

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#f").hide();
        $("#select").click(function () {
            //发送ajax查询所有图书
            $.ajax({
                url: "/selectAllBook",
                success: function (data) {
                    var str = '<table align="center" border="1">' +
                        '    <thead>' +
                        '    <tr>' +
                        '        <th>图书编号</th>' +
                        '        <th>图书名称</th>' +
                        '        <th>图书价格</th>' +
                        '        <th>操作</th>' +
                        '    </tr>' +
                        '    </thead>' +
                        '    <tbody>';
                    $.each(data, function (index, book) {
                        str += '<tr>' +
                            '<td>' + book.id + '</td>' +
                            '<td>' + book.bookName + '</td>' +
                            '<td>' + book.bookPrice + '</td>' +
                            '<td>' + '<a href="javascript:void(0)" onclick="getBookDetail(' + book.id + ')">修改</a>' + '||' + '<a href="javascript:void(0)" onclick="deleteBook(' + book.id + ')">删除</a>' + '</td>' +
                            '</tr>';
                    })
                    str += '    </tbody>' +
                        '</table>';
                    $("#detail").html(str);

                },
                dataType: "json"
            });
        });

        $("#insert").click(function () {
            $("#f").toggle();
        });
        $("#add").click(function () {
            var bookName = $("#f input:eq(0)").val();
            var bookPrice = $("#f input:eq(1)").val();
            $.ajax({
                url: "insertBook",
                data: {"bookName": bookName, "bookPrice": bookPrice},
                success: function (result) {
                    if (result == "success") {
                        //添加图书成功
                        alert("添加图书成功，请点击查询所有图书！")
                    }
                }
            });
        });
    });

    function deleteBook(id) {
        $.ajax({
            url: "delete?id=" + id,
            success: function (result) {
                if (result == "success") {
                    //删除图书成功
                    alert("删除图书成功，请点击查询所有图书！")
                }
            }
        });
    }

    function getBookDetail(bookId) {
        $.ajax({
            url: "getBook?id=" + bookId,
            success: function (data) {
                $("#dd").html('<form id="f2">\n' +
                    '    <input type="hidden" name="id" value="' + data.id + '"/><br/>\n' +
                    '    bookName:<input type="text" name="bookName" value="' + data.bookName + '"/><br/>\n' +
                    '    bookPrice:<input type="text" name="bookPrice" value="' + data.bookPrice + '"/><br/>\n' +
                    '    <a href="javascript:void(0)" onclick="update()">update</a>\n' +
                    '</form>');
            }
        })
    }

   function update() {
        var id = $("#f2 input:eq(0)").val();
        var bookName = $("#f2 input:eq(1)").val();
        var bookPrice = $("#f2 input:eq(2)").val();
        $.ajax({
            url: "updateBook",
            data: {"id":id,"bookName": bookName, "bookPrice": bookPrice},
            success: function (result) {
                if (result == "success") {
                    alert("更新图书成功，请点击查询所有图书！")
                }
            }
        })
    }
</script>
<body>
<p align="center"><a href="javascript:void(0)" id="select">查询所有图书</a>&nbsp;||&nbsp;<a href="javascript:void(0)"
                                                                                      id="insert">添加图书</a></p>
<div id="detail">

</div>

<hr/>
<form id="f">
    bookName:<input type="text" name="bookName"/><br/>
    bookPrice:<input type="text" name="bookPrice"/><br/>
    <input type="button" id="add" value="insert"/>
</form>
<div id="dd"></div>

</body>
</html>

在html中使用ajax遍历服务器端返回json数据正确的遍历方式

猜你喜欢