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;
            }
        }




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章