用戶登錄的驗證可以使用 form 表單提交,也可以使用 ajax 技術非同步提交。 AJAX 即 Asynchronous Javascript And XML(非同步 JavaScript 和 XML),是一種用於創建快速動態網頁的技術。 通過在後臺與伺服器進行少量數據交換,AJAX 可以使網頁實現異 ...
用戶登錄的驗證可以使用 form 表單提交,也可以使用 ajax 技術非同步提交。
AJAX 即 Asynchronous Javascript And XML(非同步 JavaScript 和 XML),是一種用於創建快速動態網頁的技術。
通過在後臺與伺服器進行少量數據交換,AJAX 可以使網頁實現非同步更新。
這意味著可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。
傳統的網頁(不使用 AJAX)如果需要更新內容,必需重載整個網頁面。
jQuery ajax() 方法法是 jQuery 底層 AJAX 實現。
ajax() 方法有幾個重要參數:
$.ajax({
url: "detail.html", //發送請求的地址,String類型的參數
data:{id:"id"}, //發送到伺服器的數據,Object或String類型的參數,如果已經不是字元串,將自動轉換為字元串格式。
type: "POST", //請求方式,預設為GET,String類型的參數
dataType:'json', //預期伺服器返回的數據類型,String類型的參數;可用類型有(xml,html,json,jsonp,text)
timeout:1000, //請求超時時間,毫秒
async: true, // 預設為true,所有請求均為非同步請求,Boolean類型的參數
beforeSend:function(XMLHttpRequest){ //發送請求前調用的函數
},
complete:function(XMLHttpRequest, textStatus){ //請求完成後調用的回調函數(請求成功或失敗時均調用)
},
success:function(){ //請求成功後調用的回調函數
},
error:function(){ //請求失敗時被調用的函數
}
});
示例:
驗證用戶登錄前臺代碼
$("#loginBtn").click(function(){
var user = new Object();
user.loginCode = $.trim($("#loginCode").val());
user.password = $.trim($("#password").val());
//前臺的非空驗證
if(user.loginCode == "" || user.loginCode == null){
$("#loginCode").focus;
$("#formtip").css("color","red");
$("#formtip").html("對不起,登錄賬號不能為空。");
}else if(user.password == "" || user.password == null){
$("#password").focus;
$("#formtip").css("color","red");
$("#formtip").html("對不起,登錄密碼不能為空。");
}else{
$("#formtip").html("");
//如果賬號和密碼都不為空,就進行 ajax 非同步提交
$.ajax({
type:'POST', //提交方法是POST
url:'/login.html', //請求的路徑
data:{user:JSON.stringify(user)}, //以JSON字元串形式把 user 傳到後臺
dataType:'html', //後臺返回的數據類型是html文本
timeout:1000, //請求超時時間,毫秒
error:function(){ //請求失敗的回調方法
$("#formtip").css("color","red");
$("#formtip").html("登錄失敗!請重試。");
},
success:function(result){ //請求成功的回調方法
if(result != "" && result == "success"){
//若登錄成功,跳轉到"/main.html"
window.location.href='/main.html';
}else if(result == "failed"){
$("#formtip").css("color","red");
$("#formtip").html("登錄失敗!請重試。");
$("#loginCode").val('');
$("#password").val('');
}else if(result == "nologincode"){
$("#formtip").css("color","red");
$("#formtip").html("登錄賬號不存在!請重試。");
}else if(result == "pwderror"){
$("#formtip").css("color","red");
$("#formtip").html("登錄密碼錯誤!請重試。");
}else if("nodata" == result){
$("#formtip").css("color","red");
$("#formtip").html("對不起,沒有任何數據需要處理!請重試。");
}
}
});
}
});
驗證用戶登錄後臺代碼
/*@responseBody註解的作用是將 controller 的方法返回的對象通過適當的轉換器轉換為指定的格式之後,寫入到 response 對象的 body 區,通常用來返回 JSON 數據或者是 XML 數據,需要註意的是,在使用此註解之後不會再走視圖處理器,而是直接將數據寫入到輸入流中,他的效果等同於通過response對象輸出指定格式的數據。*/
@RequestMapping("/login.html")
@ResponseBody
public Object login(HttpSession session,@RequestParam String user){
//後臺非空驗證
if(user == null || "".equals(user)){
return "nodata";
}else{
//user 轉換成 json 對象,再轉成 java 對象
JSONObject userObject = JSONObject.fromObject(user);
User userObj= (User)userObject.toBean(userObject, User.class);
try {
if(userService.loginCodeIsExit(userObj) == 0){//不存在這個登錄賬號
return "nologincode";
}else{
User _user = userService.getLoginUser(userObj);
//登錄成功
if(null != _user){
//當前用戶存到session中
session.setAttribute(Constants.SESSION_USER, _user);
//更新當前用戶登錄的lastLoginTime
User updateLoginTimeUser = new User();
updateLoginTimeUser.setId(_user.getId());
updateLoginTimeUser.setLastLoginTime(new Date());
userService.modifyUser(updateLoginTimeUser);
updateLoginTimeUser = null;
return "success";
}else{
//密碼錯誤
return "pwderror";
}
}
} catch (Exception e) {
return "failed";
}
}
}
關於 ajax() 方法更多詳細參數及使用方法參見 w3cschool手冊
作者:Jason_M_Ho
鏈接:https://www.jianshu.com/p/d36d8cd508ed
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯繫作者獲得授權並註明出處。