前言
我們日常開發中，異步刷新技術使用十分廣泛，今天以用戶信息校驗爲例子進行相關講解。
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
輸入錯誤信息時
輸入正確信息時
