前言
我们日常开发中，异步刷新技术使用十分广泛，今天以用户信息校验为例子进行相关讲解。
1. AJAX实现异步刷新
简介：
[1] AJAX = Asynchrous JavaScript and XML （异步的JavaScript 和XML）
[2] AJAX 是一个唔需要重新加载整个网页的情况下，能够更新部分网页的技术
[3] AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web 应用程序技术
[4] AJAX 在我们生活中应用十分广泛，如我们在百度上输入某个关键字，下拉框就会弹出热搜信息。
**实现简单的登录验证 **
前序：该项目是在SpringMVC的框架上运行的，其余相关的web,boot项目都可以使用；
[1] 编写login.jsp页面
<p>
用户名: <input type="text" id="name" οnblur="a1()">
<span id="userInfo"></span>
</p>
<p>
密码: <input type="text" id="pwd" οnblur="a2()">
<span id="pwdInfo"></span>
</p>
上面的输入框中，当我们鼠标失去焦点后，就会调用js的代码，其中js 代码就是相关的ajax操作；这里我们先编写后台的逻辑层代码
[2] AjaxController.class
这里主要是校验前台用户名和密码的合法性
@RestController
public class AjaxController {
@RequestMapping("/a3")
public String a3(String name, String pwd){
String msg = "";
if (name != null){
if ("admin".equals(name)){
msg = "ok";
}else{
msg = "用户名有误";
}
}
if (pwd != null){
if ("123456".equals(pwd)){
msg = "ok";
}else{
msg = "密码有误";
}
}
return msg;
}
}
编写完后台逻辑代码后，我们可以继续编写jsp页面中关于ajax 异步刷新的步骤 (即访问我们controller层的逻辑实现)
[3] 编写 login.jsp中的ajax代码
步骤：
1.导入jquery的包
2.使用$.post 递交前台的数据（name,pwd）到 controller 层后，返回controlle层中的msg（即前台接收的data）
3.把data信息添加到输入框后面
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
<script>
function a1() {
$.post({
url: "${pageContext.request.contextPath}/a3",
data: {"name": $("#name").val()},
success:function (data) {
if(data.toString() === 'ok'){
$("#userInfo").css("color","green");
}else{
$("#userInfo").css("color","red");
}
$("#userInfo").html(data);
}
})
}
function a2() {
$.post({
url: "${pageContext.request.contextPath}/a3",
data: {"pwd": $("#pwd").val()},
success:function (data) {
if(data.toString() === 'ok'){
$("#pwdInfo").css("color","green");
}else {
$("#pwdInfo").css("color","red");
}
$("#pwdInfo").html(data);
}
})
}
</script>
完整的login.jsp代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
<script>
function a1() {
$.post({
url: "${pageContext.request.contextPath}/a3",
data: {"name": $("#name").val()},
success:function (data) {
if(data.toString() === 'ok'){
$("#userInfo").css("color","green");
}else{
$("#userInfo").css("color","red");
}
$("#userInfo").html(data);
}
})
}
function a2() {
$.post({
url: "${pageContext.request.contextPath}/a3",
data: {"pwd": $("#pwd").val()},
success:function (data) {
if(data.toString() === 'ok'){
$("#pwdInfo").css("color","green");
}else {
$("#pwdInfo").css("color","red");
}
$("#pwdInfo").html(data);
}
})
}
</script>
</head>
<body>
<p>
用户名: <input type="text" id="name" onblur="a1()">
<span id="userInfo"></span>
</p>
<p>
密码: <input type="text" id="pwd" onblur="a2()">
<span id="pwdInfo"></span>
</p>
</body>
</html>
[4] 运行项目
http://localhost:8080/login.jsp
输入错误信息时
输入正确信息时
