使用 Ajax 更新表/表的一部分答案

【问题标题】：Update table/part of table using Ajax使用 Ajax 更新表/表的一部分
【发布时间】：2016-07-21 20:55:03
【问题描述】：

我知道这个问题被问了很多次。我希望再举一个例子和解决方案不会造成伤害。

<head>
    <meta charset="UTF-8">
    <title>Book Store</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#call').click(function ()
            {
                    $.ajax({
                        type: "post",
                        url: "books",
                        data: $('#buyBookForm').serialize(),
                        success: function(data) {
                            var s = $(data).find('#buyBookForm');
                            $('#buyBookForm').html($(data).find('#buyBookForm'));
                        }
                    });
            });
        });
    </script>
</head>
<body>
<h1>Book Store</h1>

<form id="buyBookForm" action="books" method="post">
<table width="70%" border="1">
    <c:forEach items="${books}" var="book">
        <tr>
            <th>Book Name</th>
            <th>Author</th>
            <th>Genre</th>
            <th>Price</th>
            <th>Sold</th>
            <th>Bought By</th>
        </tr>
        <tr>
            <td>
            <input type="checkbox" name="book${book.getName()}"
                   value="${book.getBook_id()}"> <label>${book.getName()}</label>
            </td>
            <td>${book.getAuthor().getName()}</td>
            <td>${book.getGenre()}</td>
            <td>${book.getPrice()}</td>
            <td>${book.isBought()}</td>
            <td id = "bought_column"><c:choose>
                <c:when test="${book.getUsers().size() >= 1}">
                    Bought ${book.getUsers().size()} times.
                    <br />
                </c:when>
                <c:otherwise>
                    Have never been bought.
                    <br />
                </c:otherwise>
            </c:choose></td>
        </tr>
    </c:forEach>
</table>
</form>
<input type="button" value="Purchase using AJAX" name="Purchase using AJAX" id="call"/>

我的back-end 返回行 html。请帮我看看：

如何重新组织我的 ajax 调用以重新加载整个表 #buyBookForm？
如何仅重新加载表#bought_column 的一部分？

【问题讨论】：

标签： jquery html ajax

【解决方案1】：

如何重新组织我的 ajax 调用以重新加载整个表格 #buyBookForm？

$('#call').click(function ()
  {
    $.ajax({
    type: "post",
    url: "books",
    data: $('#buyBookForm').serialize(),
    success: function(data) {
      $('#buyBookForm > table').html(data); //assumed that you get whole table from the ajax call
    }
  });
});

如何仅重新加载表#bought_column 的一部分？

假设您获得了属于购买列的数据数组（以 JSON 表示法）

$('#call').click(function ()
  {
    $.getJSON({
    url: "books",
    data: $('#buyBookForm').serialize(),
    success: function(data) {
      // Takes every 4-th td element of 6-columns table 
      $('#buyBookForm > table td').filter(function(a,b){return (a+3)%6 == 0;}).each(function(a,b){$(b).html(data[a])});
    }
  });
});

【讨论】：