JS代碼如下，在頁面登錄之后能顯示到登錄的資訊，但是頁面一重繪就要重新登錄
$(function(){
//隱藏錯誤資訊提示
$("#loginTip").hide();
$("#verifyTip").hide();
$("#showInfo").hide();
//重繪登錄驗證碼
$("#vCodeImg").click(function(){
var src = "http://localhost:8080/bbs/servlet/VerifyCodeServlet";
var date = new Date().getTime();
$("#vCodeImg").attr("src",$("#vCodeImg").attr("src") + "?" + date);
})
//獲取到提交按鈕，并且系結click事件
$("#logBtn").click(function(){
var loginEmail = $("#loginEmail").val();
var loginPwd = $("#loginPwd").val();
var verifyCode = $("#verifyCode").val();
$.ajax({
type:"POST", //規定請求的型別(GET或POST)
url:"http://localhost:8080/bbs/servlet/UserLoginServlet", //指定發送請求的URL，默認為當前頁面
//Ajax跨域訪問
xhrFields:{
withCredentials:true
},
//指定要發送到服務器的資料
data:{
"loginEmail":loginEmail,
"loginPwd":loginPwd,
"verifyCode":verifyCode
},
dataType:"json", //預期的服務器回傳的資料型別
success:function(data){ //請求成功，服務器正常回傳結果
console.log(JSON.stringify(data)); //將JSON物件轉換為字串
console.log(data.emailData); //取JSON物件中屬性的值
//根據后臺回傳的結果設定提示資訊
var p = $("#loginTip");
var ep = $("#verifyTip");
if(data.verifyError == "error"){
ep.show();
ep.text("驗證碼輸入有誤");
}
else if(data.loginInfo != ""){
var email = JSON.stringify(data);
alert("登錄成功!");
$("#login").modal('hide'); //登錄成功后關閉登錄彈窗
//$("#login_register").hide(); //隱藏登錄注冊按鈕
$("#login_register").remove();
$("#loginInfo").text("歡迎回來:" + email);
$("#showInfo").show();
}
else if(data.result == "fail"){
//登陸失敗資訊
p.show();
p.text("您輸入的郵箱或密碼有誤");
}
//當密碼輸入框再次獲得焦點的時候，隱藏錯誤資訊
var pwdElt = document.getElementById("loginPwd");
pwdElt.onfocus = function(){
p.hide();
pwdElt.value = "";
}
//當驗證碼輸入框再次獲得焦點，隱藏錯誤資訊并清空輸入框
var verifyElt = document.getElementById("verifyCode");
verifyElt.onfocus = function(){
ep.hide();
verifyElt.value = "";
}
},
error:function(errorData){ //請求失敗，服務器沒有正常的回傳結果，服務器宕機，后臺程式例外
alert("服務器例外!請稍后重試");
}
});
});
});
uj5u.com熱心網友回復：
1、如果你現在就一個登陸頁面和一個登陸介面，那重繪后頁面重置是很正常的；2、我覺得你的想法是登錄后顯示用戶資訊，重繪后還顯示的是剛剛的資訊。那你請求成功后就需要把用戶資訊保存下來（sseionstorge等）。在當前頁面加載的時候讀取就行了。在頁面加載的時候添加判斷，如果sseionstorge有用戶資訊 就讀取然后顯示用戶資訊。如果沒有資訊，就顯示登陸UI。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/116993.html
標籤：Ajax
上一篇：nfs和webserver