<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<script src="/js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="/js/jquery-ui-1.8.2.custom.js" type="text/javascript"></script>
<script type="text/javascript">
//向伺服器請求當前登入狀態，然後切換登入地區的顯示
var checkLogin = function () {
$.post("/ajax/CheckLogin.ashx", function (data) {
var strs = data.split("|");
if (strs[0] == "no") {
//alert("木有登陸");
$("#divLoginArea").show(); //如果沒有登陸就顯示"登陸"
$("#divLoginOutArea").hide(); //隱藏"登出"
}
else {
//切換“登入”、“登出”的兩個層
$("#divLoginArea").hide(); //隱藏"登陸"
$("#divLoginOutArea").show(); //顯示 "登出"
$("#spanUserName").text(strs[1]);//把當前登入使用者名稱顯示出來
}
});
}
var loginFinish = function (data) { //這是一個回呼函數
if (data == "ok") {
//alert("成功");
$("#divLogin").dialog("close"); //登入成功關閉視窗
checkLogin();//登入成功，重新整理登入地區的顯示
}
else {
alert("使用者名稱密碼錯誤");
}
};
$(function () {
$("#btnShowLoginDlg").click(function () {
$("#divLogin").dialog({
height: 200,
modal: true
});
});
$("#btnLogin").click(function () { //當使用者點擊"登陸" 控制項觸發事件
//todo:檢驗使用者名稱、密碼不可為空
var username = $("#txtUserName").val();
var password = $("#txtPwd").val();
$.post("/ajax/UserLogin.ashx",//----------------------請關注這條$.Post()請求的參數與回呼函數
{ "username": username, "password": password },
loginFinish);
});
});
$(function () {
checkLogin();//剛進入頁面的時候也是先向伺服器查詢當前登入狀態
$("#btnLogout").click(function () {
$.post("/ajax/Logout.ashx", function () {
checkLogin();//重新整理顯示
});
});
});
</script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="divLoginArea" style="display:none"><input type="button" value="登入" id="btnShowLoginDlg" /></div>
<div id="divLoginOutArea" style="display:none">
<span id="spanUserName"></span>
<input type="button" value="登出" id="btnLogout" />
</div>
<div id="divLogin" title="登入視窗" style="display:none">
<table>
<tr><td>使用者名稱：</td><td><input type="text" id="txtUserName"/></td></tr>
<tr><td>密碼：</td><td><input type="password" id="txtPwd"/></td></tr>
<tr><td colspan="2"><input type="button" value="登入" id="btnLogin" /></td></tr>
</table>
</div>
<br />
<asp:ContentPlaceHolder ID="placeHolderMain" runat="server">
</asp:ContentPlaceHolder>
<br />
尾部<br />
</div>
</form>
</body>
</html>
