• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

在ajax POST后加载表格

JavaScript 来源:Maff 8次浏览

在我完成使用ajax POST来更新表格中的特定用户之后,我试图在模式关闭后重新加载我的用户表格。我已经利用jQuery加载函数再次调用我的页面,以便页面刷新,但页面看起来像是自己复制。我在下面提供了我的代码。 我的Ajax POST功能成功更新和重新加载页面:在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(...); 

这是因为​​代替你把它应用到,它的元素的内容不会取代元素本身。所以你最终得到了一张表中的表格,以及重复的ID。


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)