Question

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

<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的一部分？

Answer 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的一部分？

假设您获得属于buying_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])});
    }
  });
});

使用Ajax更新表/部分表

1 个答案: