因為工作需要研究了一下 js的ajax,下面是成果。
主要是三部分:
一、js部分 友情提示注意js部分中的 $("#btn_login")中的return false;這個可以阻止迴轉伺服器不然還是會重新整理
$(document).ready(function () { $("#btn_login").click(function () { postlogin(); return false; });});function postlogin() { if (checkUserName() && checkUserPwd()) { var username = $('#txt_loginname').val(); var userpass = $('#txt_loginpass').val(); $.post("../UserLogin.aspx", { UserName: username, UserPass: userpass }, function (result) { if (result == "1") { alert("登入成功!"); } else if (result == "3") { alert("使用者名稱不正確!"); } else if (result == "2") { alert("密碼不正確!"); } else { alert("登入失敗!請重試!" + result); } }); }}function checkUserName() { if ($("#txt_loginname").val().length == 0) { alert('使用者名稱不可為空!'); return false; } else { return true; }}function checkUserPwd() { if ($("#txt_loginpass").val().lenght == 0) { alert('密碼不正確!'); return false; } else { return true; }}
二、頁面部分
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="32%" height="37" valign="middle">使用者名稱:</td> <td width="68%" valign="middle"> <input type="text" name="txt_loginname" id="txt_loginname" class="input_1"/> </td> </tr> <tr> <td height="37" valign="middle">密 碼:</td> <td valign="middle"> <input type="password" name="txt_loginpass" id="txt_loginpass" class="input_2"/> </td> </tr> <!--<tr> <td height="37" valign="middle">驗證碼:</td> <td valign="middle"> <input type="text" name="textfield3" id="textfield3" class="input_3" style="float:left"/> <span style="float:left; margin-left:6px;"><img src="images/img_7.gif" /></span></td> </tr>--> <tr> <td colspan="2"> <input type="image" name="btn_login" id="btn_login" src="images/img_4.gif" /> <input type="image" name="input" src="images/img_5.gif" /> <input type="image" name="input" src="images/img_6.gif" /> </td> </tr> </table>
三、後台部分也就是在js中轉向的處理登入資訊的頁面
protected void Page_Load(object sender, EventArgs e) { string username = Request.Form["UserName"]; string userpass = Request.Form["UserPass"]; T_User user = UserManager.loginpassword(username, userpass); if (user != null) { Session["user"] = user; Response.Write("1"); //登入成功 Response.End(); } else { if (UserManager.OnlyOne(username) >= 1) { Response.Write("2"); //密碼不正確 Response.End(); } else { Response.Write("3"); //使用者名稱不存在 Response.End(); } } }