jQuery基于ajax方式實(shí)現(xiàn)用戶名存在性檢查功能示例
本文實(shí)例講述了jQuery基于ajax方式實(shí)現(xiàn)用戶名存在性檢查功能。分享給大家供大家參考,具體如下:
對(duì)于擁有會(huì)員功能的網(wǎng)站,尤其是會(huì)員登錄后可以留言或評(píng)論的網(wǎng)站,一般要求不能有兩個(gè)或兩個(gè)以上相同的用戶名存在。因此,在用戶注冊(cè)的時(shí)就需要對(duì)用戶名是否已經(jīng)被注冊(cè)進(jìn)行檢查防止出現(xiàn)相同的用戶名。下面是我實(shí)現(xiàn)這種功能的一種解決方案。
1、方案原理:利用ajax的異步請(qǐng)求不刷新正在注冊(cè)的頁(yè)面向后端發(fā)送請(qǐng)求,后端對(duì)請(qǐng)求數(shù)據(jù)進(jìn)行處理返回用戶名是否已經(jīng)存在的結(jié)果。
2、方案詳情
(1)html代碼部分,運(yùn)用了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 將不會(huì)從瀏覽器緩存中加載請(qǐng)求信息。 async: true, //(默認(rèn): true),所有請(qǐng)求均為異步請(qǐng)求。發(fā)送同步請(qǐng)求,請(qǐng)將此選項(xiàng)設(shè)置為 false。同步請(qǐng)求將鎖住瀏覽器,用戶其它操作必須等待請(qǐng)求完成才可以執(zhí)行。 timeout: 150000, //設(shè)置請(qǐng)求超時(shí)時(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 () //檢查之前,是否通過(guò)格式驗(yàn)證 { 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擴(kuò)展技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jquery ajax 檢測(cè)用戶注冊(cè)時(shí)用戶名是否存在
- 基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶名是否存在的實(shí)現(xiàn)代碼
- jQuery異步驗(yàn)證用戶名是否存在示例代碼
- 基于jQuery實(shí)現(xiàn)Ajax驗(yàn)證用戶名是否存在實(shí)例
- jquery easyUI中ajax異步校驗(yàn)用戶名
- JQuery用戶名校驗(yàn)的具體實(shí)現(xiàn)
- 利用jQuery.Validate異步驗(yàn)證用戶名是否存在(推薦)
- jQuery+Ajax實(shí)現(xiàn)用戶名重名實(shí)時(shí)檢測(cè)
相關(guān)文章
jQuery簡(jiǎn)單實(shí)現(xiàn)列表隱藏和顯示效果示例
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)列表隱藏和顯示效果,結(jié)合實(shí)例形式分析了jQuery中slideToggle動(dòng)態(tài)操作頁(yè)面元素切換的相關(guān)技巧,需要的朋友可以參考下2016-09-09jQuery實(shí)現(xiàn)類似老虎機(jī)滾動(dòng)抽獎(jiǎng)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)類似老虎機(jī)滾動(dòng)抽獎(jiǎng)效果的方法,實(shí)例分析了jquery隨機(jī)數(shù)及Ajax調(diào)用的相關(guān)技巧,需要的朋友可以參考下2015-08-08jQuery使用CSS()方法給指定元素同時(shí)設(shè)置多個(gè)樣式
這篇文章主要介紹了jQuery使用CSS()方法給指定元素同時(shí)設(shè)置多個(gè)樣式的方法,實(shí)例分析了jQuery中css方法的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03jquery ajax結(jié)合thinkphp的getjson實(shí)現(xiàn)跨域的方法
這篇文章主要介紹了jquery ajax結(jié)合thinkphp的getjson實(shí)現(xiàn)跨域的方法,結(jié)合實(shí)例形式對(duì)比分析了jQuery ajax實(shí)現(xiàn)跨域的具體操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06jquery實(shí)現(xiàn)可橫向和豎向展開(kāi)的動(dòng)態(tài)下滑菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)可橫向和豎向展開(kāi)的動(dòng)態(tài)下滑菜單效果,以實(shí)例形式較為詳細(xì)的分析了jquery實(shí)現(xiàn)橫向與豎向展開(kāi)菜單的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08擴(kuò)展jquery實(shí)現(xiàn)客戶端表格的分頁(yè)、排序功能代碼
下面鏈接中是我用jQuery的擴(kuò)展來(lái)實(shí)現(xiàn)的表格分頁(yè)和排序,使用這個(gè)擴(kuò)展必須加上表頭<thead>和<tbody>標(biāo)簽,因?yàn)槲沂?通過(guò)<tbody>來(lái)進(jìn)行分頁(yè)的,要是不加thead,那么表頭也要作為分頁(yè)計(jì)算時(shí)的一個(gè)行了。2011-03-03JQuery Mobile 彈出式登錄框的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JQuery Mobile 彈出式登錄框的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05簡(jiǎn)單講解jQuery中的子元素過(guò)濾選擇器
這篇文章主要介紹了jQuery中的子元素過(guò)濾選擇器,列舉了一些操作DOM時(shí)獲取父元素的一些方法,需要的朋友可以參考下2016-04-04跟我一起學(xué)寫(xiě)jQuery插件開(kāi)發(fā)方法(附完整實(shí)例及下載)
jQuery如此流行,各式各樣的jQuery插件也是滿天飛。你有沒(méi)有想過(guò)把自己的一些常用的JS功能也寫(xiě)成jQuery插件呢?如果你的答案是肯定的,那么來(lái)吧!和我一起學(xué)寫(xiě)jQuery插件吧!2010-04-04