如何通过AJAX实现无刷新更新基于Spring Model的动态表格

看起来你想实现点击删除按钮后，无需刷新页面就能更新基于Spring Model属性渲染的用户列表对吧？结合你给出的现有前端代码，我给你整理了一套完整的实现方案，分前端和后端两部分来做：

一、前端AJAX逻辑实现 #

首先完善你的前端代码，给删除按钮绑定AJAX事件，请求后端处理删除并更新页面：

<div id="user-list">
  <div class="row" id="user-list-row">
    <c:forEach items="${userList}" var="user">
      <!-- 给每个用户项加data属性，方便后续定位删除 -->
      <div class="user-item" data-user-id="${fn:escapeXml(user.id)}">
        <ul>
          <li>${fn:escapeXml(user.firstName)}</li>
          <li>${fn:escapeXml(user.lastName)}</li>
          <li>${fn:escapeXml(user.email)}</li>
        </ul>
        <div>
          <a class="removeUserButton" href="javascript:void(0)" user-id="${fn:escapeXml(user.id)}">
            <span class="glyphicon glyphicon-remove"></span> 删除
          </a>
        </div>
      </div>
    </c:forEach>
  </div>
</div>

<!-- 引入jQuery（如果项目里已经有了可以跳过） -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function() {
  // 用事件委托绑定，避免重新加载列表后事件失效
  $(document).on('click', '.removeUserButton', function() {
    const userId = $(this).attr('user-id');
    // 先弹出确认框，防止误操作
    if (confirm('确定要删除该用户吗？')) {
      // 发送AJAX删除请求
      $.ajax({
        url: '/users/delete/' + userId, // 这里替换成你的后端接口地址
        type: 'POST', // 也可以用DELETE方法，看你后端的RequestMapping配置
        dataType: 'json',
        success: function(response) {
          if (response.success) {
            // 两种更新页面的方式选一种：
            // 方式1：直接移除当前用户的DOM元素（简单场景推荐）
            $('.user-item[data-user-id="' + userId + '"]').fadeOut(function() {
              $(this).remove();
            });

            // 方式2：重新加载整个用户列表（适合有分页/筛选等复杂场景）
            // $.get('/users/list-fragment', function(html) {
            //   $('#user-list-row').html(html);
            // });
          } else {
            alert('删除失败：' + response.message);
          }
        },
        error: function(xhr, status, err) {
          alert('删除请求出错，请稍后重试');
          console.error('请求错误:', err);
        }
      });
    }
  });
});
</script>

二、Spring后端接口实现 #

接下来需要在Spring Controller里写对应的处理接口，分两种场景：

场景1：仅返回删除结果（对应前端方式1） #

@Controller
@RequestMapping("/users")
public class UserController {

    @Autowired
    private UserService userService;

    // 处理用户删除请求，返回JSON响应
    @PostMapping("/delete/{userId}")
    @ResponseBody
    public Map<String, Object> deleteUser(@PathVariable Long userId) {
        Map<String, Object> result = new HashMap<>();
        try {
            userService.deleteUserById(userId);
            result.put("success", true);
        } catch (Exception e) {
            result.put("success", false);
            result.put("message", "删除失败：" + e.getMessage());
            e.printStackTrace();
        }
        return result;
    }
}

场景2：返回渲染好的列表片段（对应前端方式2） #

如果你的列表有分页、筛选等复杂逻辑，直接重新加载整个列表片段会更稳妥：

@Controller
@RequestMapping("/users")
public class UserController {

    @Autowired
    private UserService userService;

    // 处理删除请求
    @PostMapping("/delete/{userId}")
    @ResponseBody
    public Map<String, Object> deleteUser(@PathVariable Long userId) {
        // 和场景1的代码一致
        Map<String, Object> result = new HashMap<>();
        try {
            userService.deleteUserById(userId);
            result.put("success", true);
        } catch (Exception e) {
            result.put("success", false);
            result.put("message", "删除失败：" + e.getMessage());
            e.printStackTrace();
        }
        return result;
    }

    // 返回用户列表的HTML片段（支持JSP/Thymeleaf）
    @GetMapping("/list-fragment")
    public String getUserListFragment(Model model) {
        List<User> userList = userService.getAllUsers();
        model.addAttribute("userList", userList);
        // JSP写法：return "fragments/user-list :: user-list-row";
        // Thymeleaf写法：return "fragments/user-list :: user-list-row";
        return "fragments/user-list :: user-list-row";
    }
}

三、关键注意点 #

• XSS防护：你已经用了fn:escapeXml来转义用户输入，这点做得很好，继续保持！
• 事件绑定：用$(document).on('click', '.removeUserButton', ...)这种事件委托方式，避免重新加载列表后删除按钮失效
• HTTP方法：删除操作推荐用DELETE方法，后端对应@DeleteMapping，不过有些环境可能对DELETE请求有限制，用POST也没问题
• 异常处理：后端要捕获删除时的异常（比如用户不存在），返回友好的错误信息给前端

内容的提问来源于stack exchange，提问作者Y3nX