摘要:檢查用戶名稱是否存在?
最近小弟遇到想來作檢查用戶是否存在問題?
但是又不想整個畫面刷新
只想讓User在輸入後，離開焦點就跟後端資料庫連結做確認
但是唯一能想到就是AJAX的UpdatePanel (小弟愚鈍...
)
參考網路一些作法，完全霧煞煞
蠻頭苦幹3天後，終於有所理解
在這裡分享小弟心得...希望對各大大有所幫助
也請大大們多多指教...THX!
PS:此方式需要3支code，基本上只有2支code，只是小弟我把js獨立出來
舊方法：Client <---連結資料- --> db
新方法：Client <---> 另一支Code(個人認為像是橋接功能) <---> db
1. chkAccount.aspx (Client所呈現畫面)
<head runat="server">
<title>未命名頁面</title>
<script type="text/javascript" src="chkAccount.js"></script>
</head>
<div id="divAccount">
Applying an account...
</div>
<input id="txtAccount" type="text" size="30" onblur="chkAccount()"/>
<img alt="" id="imgproc" style="visibility: hidden" src="images/loading.gif"/>
<br />
<input type="submit"/>
2. 這支ValiAccount.aspx的原始碼其實啥都沒有，因為這支code是作橋接功能
目的在於chkAccount.aspx收到onblur後
把txtAccount的值傳給ValiAccount.aspx然後帶參數值(txtAccount)
再利用ValiAccount.aspx的後端程式碼來跟DB做連結取得資料並利用Response.Write
把資料印在畫面上，當然User是看不到ValiAccount.aspx所呈現出來的畫面
因為小弟我只是把值傳給ValiAccount.aspx，並無把頁面導到ValiAccount.aspx，所以User看到還是停留在chkAccount.aspx頁面
ValiAccount.aspx原始碼
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ValiAccount.aspx.cs" Inherits="XXX.ValiAccount" %>ValiAccount.aspx後端
public partial class ValiAccount : System.Web.UI.Page
{
string MyID = "";
protected void Page_Load(object sender, EventArgs e)
{
receiveParameters();
}
private void receiveParameters()
{
HttpRequest hr = Request;
MyID = hr.QueryString["myId"];
DataTable dt = SqlComm.Query("SELECT * FROM EMP WHERE ID='" + MyID + "'");
if (dt.Rows.Count > 0)
{
Response.Write(dt.Rows[0]["LOG_NAME"]);
}
else
{
Response.Write("");
}
}
}3. chkAccount.js
var xmlHttp;
var proc;
// 此函式在建立 XMLHttpRequest 物件
function createXMLHttpRequest()
{
if (window.ActiveXObject)
{ // IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{ // Other browser
xmlHttp = new XMLHttpRequest();
}
}
// 程式由此執行 ( tag 裡設定 onblur="chkAccount()")
function chkAccount()
{
// 顯示處理中的圖片
proc = document.getElementById("imgproc");
proc.style.visibility = 'visible';
// 建立XMLHttpRequest物件
createXMLHttpRequest();
var myId = document.getElementById("txtAccount").value;
var url = "ValiAccount.aspx?myId=" + myId;
// 將輸入的帳號傳至後端作驗證
xmlHttp.onreadystatechange = callback;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
/* XMLHttpRequest 物件 open 方法的參數說明：
xmlHttp.open(a,b,c)
第一個參數 a 是 HTTP request 的方法：GET、POST、HEAD 中選一個使用(全大寫)
第二個參數 b 是要呼叫的 url, 不過只能呼叫與本網頁同一個網域內的網頁
第三個參數 c 決定此 request 是否採非同步進行
如果設定為 true 則即使後端尚未傳回資料也會繼續往下執行後面的程式
如果設定為 false 則必須等後端傳回資料後，才會繼續執行後面的程式
*/
// 資料回傳之後，使用 callback 這個函數處理後續動作
function callback()
{
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200))
{
var div=document.getElementById("divAccount");
div.innerHTML = "查詢中...";
var mesg = xmlHttp.responseText;
div.innerHTML = ""+mesg+"";
setMessage(mesg, true);
}
}
/* xmlHttp.readyState 所有可能的值：
0 (還沒開始),
1 (讀取中),
2 (已讀取),
3 (資訊交換中),
4 (一切完成)
xmlHttp.status 常見的值：
200 (一切正常),
404 (查無此頁),
500 (內部錯誤)
*/
function setMessage(message, isValid)
{
var messageArea = document.getElementById("divAccount");
var fontColor = "red";
if (isValid == "true" || isValid == "True")
{
fontColor = "green";
}
// 變更處理中的圖片
imgfile = new Array(2);
imgfile[0] = "images/ok.gif"
imgfile[1] = "images/error.gif"
if (message == "")
{
proc.src = imgfile[1];
}
else
{
proc.src = imgfile[0];
}
// 顯示是否有重複的帳號
messageArea.innerHTML = "" + message + " ";
}注意：小弟是在onblur作確認，所以當使用者輸入完離開焦點就會觸發驗證
Y2J's Life:http://kimenyeh.blogspot.tw/
