如何使用ajax更新表？

Question

我的問題是，我希望每當有新消息放入消息列表時，就可以在表中顯示它。 我遇到的問題是我無法刪除表中的舊行，因此setInterval只是每秒不斷地向表中添加相同的消息，或者我可以對HornService進行編碼，以便它僅發送新消息，然后我離開頁面然后返回，因為列表中沒有消息，所以列表中沒有任何消息。

在我的support.jsp中，我有：

<table id="supportMessages" class="supportTable">
<tr>
  <td class="supportColumn">
    Status  
  </td>
</tr>
</table>

<script type="text/javascript">
$(document).ready(function()
{
  setInterval(ajaxAll, 1000);
  function ajaxAll()
  {
    $.ajax
    ({
       url: "/horn/rest/main/getMessages",
       dataType: "json",
       type: "GET",
       success: function(json)
       {
         for(var i = 0; i < json.length; i++)
         {  
           $('#supportMessages tr:nth-child(1)').after(
              '<tr> <td>' + json[i].status + '</td> '+
              '</tr>');
         }
       }
    });
  }
}
</script>

在我的HornService.java中，我有：

static List<Message> messages = new ArrayList<Message>();

@GET
@Path("/getMessages")
public @ResponseBody List<Message> getMessages()
{
  return messages;
}

和Message.java：

public class Message
{
  private String status;
  public String getStatus()
  {
    return status;
  }

  public void setStatus(String status)
  {
    this.status = status;
  }
}

Answer 1

我將其添加到了javascript中，因此現在它僅重新加載了所有行：

$.ajax
({
    url:"/horn/rest/main/getMessages",
    dataType: "json",
    type: "GET",
    success: function(json)
    {
       $("#supportMessages tr").remove();
       $('#supportMessages').prepend('<tr> ' +
             '<td class="supportColumn"> Status </td>' +
             '</tr>');