springboot实现局部页面刷新
时间: 2023-11-11 11:58:18 浏览: 145
实现局部刷新的功能
4星 · 用户满意度95%
要实现局部页面刷新,可以使用 AJAX 技术。在 Spring Boot 中,可以使用 Thymeleaf 模板引擎和 jQuery 的 AJAX 方法来实现。
1. 首先,在前端页面中添加一个按钮或链接,绑定一个 JavaScript 函数,用于发送 AJAX 请求。
2. 在后端编写一个控制器方法,该方法的返回值是一个 JSON 对象,用于更新前端页面的局部内容。
3. 在 JavaScript 函数中使用 jQuery 的 AJAX 方法发送请求,指定请求的 URL、请求类型和回调函数。回调函数的参数为服务器返回的 JSON 对象,用于更新前端页面的局部内容。
下面是代码示例:
前端页面:
```
<div id="content">
<!-- 局部内容 -->
</div>
<button onclick="refreshContent()">刷新</button>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function refreshContent() {
$.ajax({
url: "/refresh", // 控制器方法的 URL
type: "GET",
success: function(data) {
// 更新局部内容
$("#content").html(data.content);
}
});
}
</script>
```
控制器方法:
```
@GetMapping("/refresh")
@ResponseBody
public Map<String, Object> refreshContent() {
Map<String, Object> result = new HashMap<>();
// 查询数据库或执行其他业务逻辑
String content = "局部内容"; // 获取局部内容
result.put("content", content);
return result;
}
```
阅读全文