如何使用ajax更新表?

时间:2013-05-02 15:07:50

标签: java javascript ajax jsp

我的问题是,每当新消息被放入消息列表中时,我都希望它显示在表中。我遇到的问题是我无法删除表中的旧行,所以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;
  }
}

1 个答案:

答案 0 :(得分: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>');