1. 程式人生 > >jquery實現註冊時非同步檢測使用者名稱是否存在

jquery實現註冊時非同步檢測使用者名稱是否存在

雙休在宿舍,把以前下載的一些教程翻來看看,程式碼都很簡單,適合入門的朋友,而我只是在這裡做個記錄,分享給大家!

第一步:放置一個Textbox控制元件,寫上onBlur事件,在VS中可能會提示這個事件錯誤,這是因為Textbox控制元件沒有這個事件,但是這並不妨礙,引數this.value是輸入到文字框中的值。

  <asp:TextBox ID="txtName" runat="server" onBlur="CheckName(this.value);"></asp:TextBox>
 <span id="mesUserName">*</span>

第二步:編寫JavaScript程式碼

也就是onBlur的觸發事件,$符號為Jquery的語法,所以,要在<head></head>中引入Jquery檔案才可以使用;

這個函式的重點應該是使用$.get 方法,第一個引數為URL(要發生的URL地址)第二個引數為回撥函式,什麼是回撥函式呢?就是執行這個操作以後會觸發的事件,回撥函式中的(data)引數,是後臺一般處理應用程式執行完返回的值,也就是第三步中context.response("false");中的值

&t=" + new Date().valueOf() 這句的意思是引數中帶上時間,主要是防止IE中的產生的快取而造成一般處理應用程式獲取name引數錯誤
    function CheckName(userName) {
         if ($.trim(userName).length == 0) {
             $("#mesUserName").html("請輸入使用者名稱");
             return;
         }
         var url = "handler/CheckUserName.ashx?name=" + userName + "&t=" + new Date().valueOf();
         $.get(url, function(data) {
             if (data == "false") {
                 $("#mesUserName").html("使用者名稱已存在");
             }
             else {
                 $("#mesUserName").html("使用者名稱可用");
             }
         })
     }
 

第三步:編寫一般處理應用程式

新建一個CheckUserName的一般處理應用程式,檔案字尾名為ashx

在一般處理應用程式中,reponse輸出要使用上下文,所以,應該寫成這樣子context.response ,request同理,程式碼其實都很簡單,主要是對這個Jquery非同步作個記錄

  public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string name = context.Request.QueryString["name"];
            if (string.IsNullOrEmpty(name))
            {
                context.Response.Write("false");
                context.Response.End();
            }
            if (new Shop.DAL.UserDAO().Exists(name))
            {
                context.Response.Write("false");
                context.Response.End();
            }
            else
            {
                context.Response.Write("true");
                context.Response.End();
            }
            context.Response.Write("Hello World");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }