Ajaxを使用してテーブル/テーブルの一部を更新します

私はこの質問が何度も尋ねられたことを知っています。もう一つの例と解決策が害を及ぼさないことを願っています。Ajaxを使用してテーブル/テーブルの一部を更新します

<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。

#buyBookFormをリロードする呼び出しを再構成するにはどうすればよいですか。
テーブル#bought_columnの一部のみを再ロードするにはどうすればよいですか？

出典

2016-07-21 Rudziankoŭ

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の一部だけをリロードすることができますか？

は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])}); 
    } 
    }); 
});

出典

2016-07-21 12:38:03

Ajaxを使用してテーブル/テーブルの一部を更新します

答えて

関連する問題