我已经做了使用Ajax POST更新表中的一个特定的用户之后，我想重装我的用户表模态关闭一次。我已经使用了jQuery加载函数再次调用我的网页，使页面刷新，但页面只是看起来像它复制自身。我提供了我下面的code。 我的Ajax POST功能成功更新和重新加载页面：

After I have done using an ajax POST to update a particular user in a table, I am trying to reload my table of users once a modal closes. I have utilised the jQuery load function to call my page again so that the page refreshes, but the page just looks like it is duplicating itself. I have supplied my code below. My Ajax POST function with success updating and re-loading page:

$.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的成功的表：

The table I am trying to reload on success of the 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>

和我的控制器，得到所有的用户数据库：

And my Controller which gets all the users from the database:

@Secured("ROLE_ADMIN")
@RequestMapping("/users")
public String getUsers(Model model) {

    List<User> users = usersService.getUsers();
    model.addAttribute("users", users);

    return "users";

}

任何指导，将AP preciated。谢谢

Any guidance will be appreciated. Thanks

推荐答案

您需要围着桌子容器：

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

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

Then your AJAX callback should do:

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

这是因为 .load（）替换应用它，它不会取代元素本身的元素的内容。所以，你和一个表内的表，以及重复的ID结束了。

This is because .load() replaces the contents of the element you apply it to, it doesn't replace the element itself. So you were ending up with a table inside a table, as well as duplicate IDs.