我是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>
我使用.ajax调用控制器,这可能会导致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");
}
});
因此,一旦会话中的List变量更新,如何更新html表中的数据?我已经在JSP和jQuery上工作了大约一个月,所以如果这看起来像业余时间那么对我来说很容易。 :)
答案 0 :(得分:0)
试试这个。 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");
}
});