在ajax POST后加载表格

  • Z时代
  • 2024-01-10
  • 分类：问答

在我完成使用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。

回答：

Jquery load不好用于ModelView，但是它返回期望页面重定向的新页面映射，模型会在响应后关闭，在您的情况下它等待免费模型！对于ajax，您应该使用jquery ajax ResponseBody和追加jquery

以上是 在ajax POST后加载表格 的全部内容， 来源链接： utcz.com/qa/260729.html

回到顶部