springmvc 學習（六） AJAX 的簡單使用，賬號密碼驗證例子
阿新 • • 發佈：2021-09-07
簡介
- AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）。
- AJAX 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。
- Ajax 不是一種新的程式語言，而是一種用於建立更好更快以及互動性更強的Web應用程式的技術。
利用AJAX可以做：
- 註冊時，輸入使用者名稱自動檢測使用者是否已經存在。
- 登陸時，提示使用者名稱密碼錯誤
- 刪除資料行時，將行ID傳送到後臺，後臺在資料庫中刪除，資料庫刪除成功後，在頁面DOM中將資料行也刪除。
- ....等等
這裡利用Ajax做一個登陸時提示使用者名稱賬號密碼是否正確的例子
這裡使用jquery提供的Ajax
jQuery Ajax本質就是 XMLHttpRequest，對他進行了封裝，方便呼叫！
下面是對應引數說明，這裡我們需要掌握的是url，type，data,success,datatype
jQuery.ajax(...) 部分引數： url：請求地址 type：請求方式，GET、POST（1.9.0之後用method） headers：請求頭 data：要傳送的資料 contentType：即將傳送資訊至伺服器的內容編碼型別(預設: "application/x-www-form-urlencoded; charset=UTF-8") async：是否非同步 timeout：設定請求超時時間（毫秒） beforeSend：傳送請求前執行的函式(全域性) complete：完成之後執行的回撥函式(全域性) success：成功之後執行的回撥函式(全域性) error：失敗之後執行的回撥函式(全域性) accepts：通過請求頭髮送給伺服器，告訴伺服器當前客戶端可接受的資料型別 dataType：將伺服器端返回的資料轉換成指定型別"xml": 將伺服器端返回的內容轉換成xml格式 "text": 將伺服器端返回的內容轉換成普通文字格式 "html": 將伺服器端返回的內容轉換成普通文字格式，在插入DOM中時，如果包含JavaScript標籤，則會嘗試去執行。 "script": 嘗試將返回值當作JavaScript去執行，然後再將伺服器端返回的內容轉換成普通文字格式 "json": 將伺服器端返回的內容轉換成相應的JavaScript物件 "jsonp": JSONP 格式使用 JSONP 形式呼叫函式時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函式名，以執行回撥函式
首先對應的jsp頁面的程式碼如下：
首先匯入對應的jquery的包，這個可以在官網裡下載
編寫兩個輸入框，分別對應賬號密碼框
滑鼠離開後觸發函式 onblur="函式名" ，賬號密碼對應的函式分別是a()，b()
ajax 函式說明：
$.post（）代表ajax，裡面寫上面對應的引數內容
url 請求的地址，data 請求時帶過去的引數，success 有個callback的返回引數，可以攜帶後端的返回資訊
<html>
<head>
<title>$Title$</title>
<script src="${pageContext.request.contextPath}/status/jquery-3.6.0.js"></script>
<script>
function a(){
$.post({
url:"${pageContext.request.contextPath}/userPwd",
data: {"username":$("#user").val()},
success:function (data){
if(data.toString()==="賬號正確"){
$("#msgUsername").css("color","green")
}else {
$("#msgUsername").css("color","red");
}
$("#msgUsername").html(data);
}
});
}
function b(){
$.post({
url:"${pageContext.request.contextPath}/userPwd",
data: {"pwd":$("#pwd").val()},
success:function (data){
if(data.toString()==="密碼正確"){
$("#msgPwd").css("color","green")
}else {
$("#msgPwd").css("color","red");
}
$("#msgPwd").html(data);
}
});
}
</script>
</head>
<body>
<form action="#" method="post">
賬號 <input type="text" id="user" onblur="a()" required/> <span id="msgUsername"></span> <br>
密碼 <input type="password" id="pwd" onblur="b()"required /> <span id="msgPwd"></span> <br>
</form>
</body>
</html>
後端對應程式碼如下：
"/userPwd"對應上面js的請求路徑url
username和pwd是前端請求的引數，這裡沒有使用資料庫獲取使用者資訊，直接使用admin和12346進行驗證，並且放回一個引數為msg的資料。
@RequestMapping("/userPwd")
public String userPwd(String username ,String pwd){
String msg=null;
if(username!=null&&username!=""){
if(username.equals("admin")){
msg="賬號正確";
}else {
msg="賬號錯誤";
}
}
if(pwd!=null&&pwd!=""){
if(pwd.equals("123456")){
msg="密碼正確";
}else {
msg="密碼錯誤";
}
}
return msg;
}
測試如下：