在ajax POST后加载表时遇到问题
问题内容:
使用ajax
POST完成表中特定用户的更新后,一旦模式关闭,我将尝试重新加载用户表。我利用jQuery加载功能再次调用了我的页面,以便页面刷新,但是页面看起来就像是在复制自己。我在下面提供了我的代码。我的Ajax
POST函数具有成功更新和重新加载页面的功能:
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/updateUser",
data: $("#updateForm").serialize(),
success: function(response) {
$("#alert").show();
$("#users_table").load("${pageContext.request.contextPath}/users #users_table");
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus); alert("Error: " + errorThrown);
}
});
我尝试在AJAX成功后重新加载的表:
<table id="users_table" class=" table table-hover table-bordered">
<tr>
<th>User Id #</th>
<th>Full Name</th>
<th>Username</th>
<th>Email</th>
<th>Date of Birth</th>
<th>User Authority</th>
<th>Update </th>
<th>Submitted Sightings</th>
<th>Delete</th>
</tr>
<c:forEach var="user" items="${users}">
<tr>
<td><c:out value="${user.id}" /></td>
<td><c:out value="${user.name}"/></td>
<td><c:out value="${user.username}"/></td>
<td><c:out value="${user.email}"/></td>
<td><c:out value="${user.dob}"/></td>
<td><c:out value="${user.authority}"/></td>
<td>
<button data-togle="modal" href="#updateModal" class="updateUser btn btn-primary" value="${user.id}">Update</button>
</td>
<td>
<button class="btn btn-success">Sightings</button>
</td>
<td>
<a class="delete" href="<c:url value="/deleteUser"><c:param name="id" value="${user.id}"/></c:url>"><button class="btn btn-danger">Delete</button></a>
</td>
</tr>
</c:forEach>
</table>
我的控制器从数据库中获取所有用户:
@Secured("ROLE_ADMIN")
@RequestMapping("/users")
public String getUsers(Model model) {
List<User> users = usersService.getUsers();
model.addAttribute("users", users);
return "users";
}
任何指导将不胜感激。谢谢
问题答案:
您需要在桌子周围放置一个容器:
<div id="users_table_container">
<table id="users_table">
...
</table>
</div>
然后,您的AJAX回调应该执行以下操作:
$("#users_table_container").load(...);
这是因为.load()
替换您要应用的元素的内容,而不是替换元素本身。因此,您最终得到了一个表内的表以及重复的ID。