java - 如何使用 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>');