前言
什么是异步刷新（局部刷新）
异步刷新是指在不重新加载整个网页的情况下，仅更新页面的某个部分。这通常通过AJAX（Asynchronous JavaScript and XML）技术实现，AJAX允许网页与服务器进行异步通信，即在发送请求后无需等待服务器响应即可完成其他任务。
案例实现
需求
如图所示需求：
步骤
在SpringMVC中，实现异步刷新的步骤如下：
- 前端页面：使用JavaScript（如jQuery）发送AJAX请求到服务器。这个请求可以包含需要更新的数据或指示服务器更新哪部分页面的信息。
- SpringMVC控制器：控制器接收AJAX请求，处理请求中的数据，并返回相应的响应。这个响应可以是JSON、XML或其他格式的数据，具体取决于前端页面的需求。
- 前端页面更新：当AJAX请求成功返回时，JavaScript使用返回的数据更新页面的指定部分。这通常涉及使用DOM操作来修改页面的内容。
准备工作
创建web项目，添加相关依赖，配置springmvc.xml和web.xml配置文件
登录页面
login.jsp
<%--
Created by IntelliJ IDEA.
User: 21038
Date: 2024/10/11
Time: 14:13
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="/js/jquery-1.8.3.js" type="text/javascript"></script>
</head>
<body>
<div>
<form id="frm" >
<table>
<tr>
<td>用户名:<input type="text" id="user_name" name="user_name" value=""/></td>
<td>密码:<input type="password" id="password" name="password" value=""/></td>
<td><input type="button" id="commit" value="登录" /></td>
</tr>
<tr>
<td>
<span id="s1" ></span>
</td>
</tr>
</table>
</form>
<script>
var user="";
$(function () {
$("#commit").click(function () {
$.ajax({
type:'POST',
url:'/login.do',
data:$("#frm").serialize(),
success:function (res) {
user=res;
console.log(user)
if (user==""){
$("#s1").html("");
}else {
$("#s1").html("用户:"+user+"，欢迎登录！");
}
$("#user_name").val("");
$("#password").val("");
}
});
});
});
</script>
</body>
</html>
使用AJAX进行异步提交数据到controller，并获取响应的Json格式数据，接收到数据后，将数据填充到页面指定位置。
控制器
LoginController
@RestController
public class LoginController {
@RequestMapping(value = "/login",method = RequestMethod.POST)
public String LoginController(String user_name , String password ){
if ("admin".equals(user_name) && "123".equals(password)){
return user_name;
}
return "";
}
}
测试
输入账户：admin和密码：123
点击登录按钮，发送ajax请求
页面异步刷新，获取到后台传输过来的数据，并填写到页面中。