ajax POST 后无法加载表答案

【问题标题】：Having trouble loading table after ajax POSTajax POST 后无法加载表
【发布时间】：2013-10-20 04:00:30
【问题描述】：

在我使用 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";

}

任何指导将不胜感激。谢谢

【问题讨论】：

标签： javascript jquery ajax spring spring-mvc

【解决方案1】：

你需要一个围绕桌子的容器：

<div id="users_table_container">
    <table id="users_table">
    ...
    </table>
</div>

那么你的 AJAX 回调应该这样做：

$("#users_table_container").load(...);

这是因为.load() 替换了你应用它的元素的内容，它不会替换元素本身。所以你最终得到了一个表中的一个表，以及重复的 ID。

【讨论】：

好的，太好了！谢谢你，正是我想要的。再次欢呼。这现在可以工作了，但是当我在更新后关闭我的模态时，当我尝试打开另一个模态时它不允许我。有什么想法吗？

【解决方案2】：

Jquery 加载不好与 ModelView 一起使用，但是它返回期望页面重定向的新页面映射，模型将在响应后关闭，在您的情况下它正在等待释放模型！对于 ajax，您应该使用带有 ResponseBody 的 jquery ajax并在 jquery 中追加

【讨论】：

【解决方案3】：

最好的解决方案是你可以逃脱嵌套的<div>;

代替：

$("#users_table_container").load("page.html #users_table_container");

使用这个：

$("#users_table_container").load("page.html #users_table_container > *");

这将导致您的<div> 不重复。

【讨论】：