jquery $.ajax使用者登入的例子

例子1,直接使用$.ajax登入

代碼如下

複製代碼

$.ajax({ // 提交地址         url: "",    // 提交的資料         data: { key1: value1, key2: value2, key3: value3, key4: value4 }, // 提交前事件         beforeSend: function () {             login.hide();             showInfo.html(loginInfo);         }, // 提交方式         type: "POST", // 提交的資料類型         dataType: "json", // 提交成功後事件         success: function (result) {             if (result.State.toString() == "success" && result.IsLogin.toString() == "1") {                 showInfo.addInfoMsg("登入成功！正在跳轉. . .");                 window.location.href = "/Default.aspx";             }             else {                 login.show();                 showInfo.addShowMsg(result.exMsg.toString());             }         }, // 提交錯誤時間         error: function (httpRequest, textStatus, errorThrown) {             showInfo.addShowMsg("系統出錯，請重新登入！");             login.show();         }     }); 返回的資料格式: // 返回的資料格式 一下  var returnInfo = "＼"State＼":＼"{0}＼",＼"IsLogin＼":＼"{1}＼",＼"exMsg＼":＼"{2}＼""; context.Response.Write("{" + String.Format(returnInfo, "success", "1", "登入成功!") + "}"); context.Response.Write("{" + String.Format(returnInfo, "fail", "0", "使用者名稱不可為空") + "}"); context.Response.Write("{" + String.Format(returnInfo, "fail", "0", "密碼不可為空") + "}"); context.Response.Write("{" + String.Format(returnInfo, "fail", "0", "您沒有登入系統的許可權，請聯絡貴公司管理員.") + "}"); context.Response.Write("{" + String.Format(returnInfo, "fail", "0", "非法登陸," + ex.Message + "}"));

這個的原理是非常的簡單提交資料給asp檔案處理當asp接愛到提交過來的資料我們進行判斷，如果使用者名稱與密碼沒有問題就寫session之後返回狀態碼，給前台的js再由js判斷調用登入成功之後頁面這樣就一個完整ajax 登入功能實現了。

看一個原生態寫法

js代碼

代碼如下

複製代碼

<scrīpt language="javascrīpt"> function postRequest(strURL){ var xmlHttp; if(window.XMLHttpRequest){ // For Mozilla, Safari, ... var xmlHttp = new XMLHttpRequest(); } else if(window.ActiveXObject){ // For Internet Explorer var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlHttp.open('POST', strURL, true); xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlHttp.onreadystatechange = function(){ if (xmlHttp.readyState == 4){ updatepage(xmlHttp.responseText); } } xmlHttp.send(strURL); } function updatepage(str){ if(str=="yes"){ alert("Welcome User"); }else{ alert("Invalid Login! Please try again!"); } } function call_login(){ var username = window.document.f1.username.value; var password = window.document.f1.password.value; var url = "login.php?username=" + username + "&password=" +password ; postRequest(url); } </scrīpt>

html代碼

login.php：

代碼如下	複製代碼
<? $username=$_GET["username"]; $password=$_GET["password"]; if($username=="admin" && $password=="admin"){ echo "yes"; }else{ echo "No"; } ?>

後面這個例子沒有對資料庫進行任何操作了，當然應用中不會有這個問題會碰到需要操作資料庫才行。