從會話變量更新html表格

Question

我對JSP，jQuery和AJAX相當陌生。我有一個JSP，它使用基於會話中List變量中的值填充的表。代碼在這裏：

<table id="someData" class="display" width="95%"> 
<thead> 
<tr> 
<th>Column 1</th> 
<th>Column 2</th> 
<th>Column 3</th> 
</tr> 
</thead> 
<tbody> 
<c:forEach var="var" items="${sessionVar}"> 
<tr> 
<td><c:out value="${var.ID}" /></td> 
<td><c:out value="${var.name}" /></td> 
<td><c:if test="${var.gender=='M'}"> 
<c:out value="Male" /> 
</c:if> <c:if test="${var.dispositionCD=='F'}"> 
<c:out value="Female" /> 
</c:if> 
</td> 
</tr> 
</c:forEach> 
</tbody> 
</table> 

我使用阿賈克斯調用控制器，並可能導致更改sessionVar變量。可以添加額外的人員，可以刪除一些人員，也可以更改一些姓名，或者根本沒有任何更改。控制器只會刷新會話中的List變量。這裏是我的Ajax調用，當用戶輸入一些數據，並按下一個按鈕運行：

 $.ajax({ 
      type : "POST", 
      url : urlText, 
      data : 'testdata', 
      dataType : 'json', 
      success : function(data,textStatus) { 
       $('#errormessage').text(data); 
      }, 
      error : function() { 
       $("#errormessage").text("Error while processing request..Please try again"); 
      } 
     }); 

因此，一旦在會議列表變量被更新，如何更新在HTML表中的數據？我已經在JSP和jQuery上工作了大約一個月，所以如果這看起來像是業餘時間，那麼就輕鬆一點。 :)

Answer 1

試試這個。 http://jsfiddle.net/tonicboy/3HGFN/

HTML：

<p id="errormessage"></p> 
<table id="someData" class="display" width="95%"> 
    <thead> 
     <tr> 
      <th>ID</th> 
      <th>Name</th> 
      <th>Gender</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>John Doe</td> 
      <td>Male</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>Jane Doe</td> 
      <td>Female</td> 
     </tr> 
    </tbody> 
</table> 
<button type="button" id="callAjax">Call the AJAX</button> 

JS：

// We will use MockJAX to simulate an AJAX response - http://code.appendto.com/plugins/jquery-mockjax. 
// This is only for illustration purposes, in your real app you would have a working controller. 

$.mockjax({ 
    url: '/people/list', 
    responseTime: 750, 
    responseText: { 
     numHits: 4, 
     success: true, 
     people: [ 
      { 
       ID: 3, 
       name: 'Adam Sapple', 
       gender: 'M' 
      }, 
      { 
       ID: 4, 
       name: 'Bill Board', 
       gender: 'M' 
      }, 
      { 
       ID: 5, 
       name: 'Candy Barr', 
       gender: 'F' 
      }, 
      { 
       ID: 6, 
       name: 'Dan Druff', 
       gender: 'M' 
      } 
     ] 
    } 
}); 

$('#callAjax').click(function() { 
    // Call the AJAX 
    $.ajax({ 
     type : "POST", 
     url : '/people/list', 
     data : 'testdata', 
     dataType : 'json', 
     success : function(data, textStatus) { 
      var tbody = $('#someData tbody'); 

      // clear out the existing table rows 
      tbody.empty(); 

      // iterate through the results 
      $.each(data.people, function(idx, person) { 
       // create a row for each person 
       var row = $('<tr></tr>'); 
       var genderText = (person.gender == 'M') ? 'Male' : 'Female'; 

       row.append('<td>' + person.ID + '</td>'); 
       row.append('<td>' + person.name + '</td>'); 
       row.append('<td>' + genderText + '</td>'); 

       tbody.append(row); 
      }); 
     }, 
     error : function() { 
      $("#errormessage").text("Error while processing request..Please try again"); 
     } 
    }); 
}); 

更新：根據您的意見

，我已經更新的代碼。基本上，您可以像以前一樣進行AJAX調用，但不會在成功時動態創建新表，而是在成功時重新加載頁面。

$.ajax({ 
    type : "POST", 
    url : '/people/list', 
    data : 'testdata', 
    dataType : 'json', 
    success : function(data, textStatus) { 
     // reload page with force reload flag (force reload may not be necessary, try it without) 
     location.reload(true); 
    }, 
    error : function() { 
     $("#errormessage").text("Error while processing request..Please try again"); 
    } 
});