如何使用ajax更新表格？

我的問題是，我想要一個新的消息被放入消息列表中，以便它在表中顯示。我遇到的問題是我無法刪除表中的舊行，所以setInterval只是每秒向表中添加相同的消息，或者我可以對HornService進行編碼，以便只發送新消息，我離開頁面並返回，因爲列表中沒有消息，所以我沒有列表中的任何消息。如何使用ajax更新表格？

在我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; 
    } 
}

來源

2013-05-02 Grammin

我加入這個以我的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>');

來源

2013-05-02 18:16:09 Grammin

如何使用ajax更新表格？

回答

相關問題