jQuery基于ajax方式實現(xiàn)用戶名存在性檢查功能示例
本文實例講述了jQuery基于ajax方式實現(xiàn)用戶名存在性檢查功能。分享給大家供大家參考,具體如下:
對于擁有會員功能的網(wǎng)站,尤其是會員登錄后可以留言或評論的網(wǎng)站,一般要求不能有兩個或兩個以上相同的用戶名存在。因此,在用戶注冊的時就需要對用戶名是否已經(jīng)被注冊進行檢查防止出現(xiàn)相同的用戶名。下面是我實現(xiàn)這種功能的一種解決方案。
1、方案原理:利用ajax的異步請求不刷新正在注冊的頁面向后端發(fā)送請求,后端對請求數(shù)據(jù)進行處理返回用戶名是否已經(jīng)存在的結(jié)果。
2、方案詳情
(1)html代碼部分,運用了input標(biāo)簽的onblur事件調(diào)用相應(yīng)的js函數(shù)。
<div class="pull-left"> <input id="username" name="username" type="text" class="form-control isUsername" onblur = "CheckUserName()"> </div>
(2)Jquery部分,采用了ajax技術(shù)
function CheckUserName() { var userName = $("#username").val(); var Option = { url: encodeURI('/Handler/AuthAccounts.ashx?action=checkusername&userName='+userName), type: "get", dataType: 'text', cache: false, //設(shè)置為 false 將不會從瀏覽器緩存中加載請求信息。 async: true, //(默認(rèn): true),所有請求均為異步請求。發(fā)送同步請求,請將此選項設(shè)置為 false。同步請求將鎖住瀏覽器,用戶其它操作必須等待請求完成才可以執(zhí)行。 timeout: 150000, //設(shè)置請求超時時間(毫秒)。此設(shè)置將覆蓋全局設(shè)置。 error: function () { }, success: function (data, textStatus) { if (data == null || data == undefined) { return false; } jsondata = eval('(' + data + ')'); if (jsondata.state == "success") { alert(jsondata.message); return false; } }, beforeSend: function () //檢查之前,是否通過格式驗證 { var text = $("#username-error").text(); if (text != ""&&text!=undefined&&text!=null) { return false; } } }; jQuery.ajax(Option); return false; }
(3)后端一般應(yīng)用處理程序
/// <summary> /// 檢查用戶名是否已經(jīng)存在 /// </summary> /// <param name="context"></param> protected void CheckUserName(string userName) { CommonStruct commonStruct = new CommonStruct(); if (userName != "" && userName!=string.Empty) { QingCi.Model.ExecResultData result = QingCi.BLL.AuthAccounts.CheckUserNameExist(userName); if (result.State == stateSuccess) { commonStruct.state = stateSuccess; commonStruct.message = result.Message; HttpContext.Current.Response.Write(serializer.Serialize(commonStruct)); HttpContext.Current.Response.End(); } } }
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jquery中Ajax用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
jQuery使用CSS()方法給指定元素同時設(shè)置多個樣式
這篇文章主要介紹了jQuery使用CSS()方法給指定元素同時設(shè)置多個樣式的方法,實例分析了jQuery中css方法的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03jquery ajax結(jié)合thinkphp的getjson實現(xiàn)跨域的方法
這篇文章主要介紹了jquery ajax結(jié)合thinkphp的getjson實現(xiàn)跨域的方法,結(jié)合實例形式對比分析了jQuery ajax實現(xiàn)跨域的具體操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06jquery實現(xiàn)可橫向和豎向展開的動態(tài)下滑菜單效果
這篇文章主要介紹了jquery實現(xiàn)可橫向和豎向展開的動態(tài)下滑菜單效果,以實例形式較為詳細(xì)的分析了jquery實現(xiàn)橫向與豎向展開菜單的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08擴展jquery實現(xiàn)客戶端表格的分頁、排序功能代碼
下面鏈接中是我用jQuery的擴展來實現(xiàn)的表格分頁和排序,使用這個擴展必須加上表頭<thead>和<tbody>標(biāo)簽,因為我是 通過<tbody>來進行分頁的,要是不加thead,那么表頭也要作為分頁計算時的一個行了。2011-03-03JQuery Mobile 彈出式登錄框的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫Query Mobile 彈出式登錄框的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05跟我一起學(xué)寫jQuery插件開發(fā)方法(附完整實例及下載)
jQuery如此流行,各式各樣的jQuery插件也是滿天飛。你有沒有想過把自己的一些常用的JS功能也寫成jQuery插件呢?如果你的答案是肯定的,那么來吧!和我一起學(xué)寫jQuery插件吧!2010-04-04