Таблица обновления/часть таблицы с использованием 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 return row html. Пожалуйста, помогите мне, чтобы увидеть:

Как реорганизовать мой ajax вызов перезагружать всю таблицу #buyBookForm?
Как я могу перезагрузить только часть таблицы #bought_column?

источник

2016-07-21 Rudziankoŭ

Как реорганизовать мой АЯКС вызов перезагружать всю таблицу #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 нотации), который принадлежит к bought_column

$('#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

ответ

Смежные вопросы