Ajax 中怎么驗(yàn)證用戶名是否存在,相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個(gè)問題。
創(chuàng)新互聯(lián),為您提供成都網(wǎng)站建設(shè)、重慶網(wǎng)站制作、網(wǎng)站營銷推廣、網(wǎng)站開發(fā)設(shè)計(jì),對(duì)服務(wù)軟裝設(shè)計(jì)等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗(yàn)。創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司成立于2013年,提供專業(yè)網(wǎng)站制作報(bào)價(jià)服務(wù),我們深知市場(chǎng)的競(jìng)爭(zhēng)激烈,認(rèn)真對(duì)待每位客戶,為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進(jìn)步,是我們永遠(yuǎn)的責(zé)任!客戶端收集表單信息。
使用XMLHttpRequest對(duì)象提交到服務(wù)器。
服務(wù)器完成驗(yàn)證的邏輯,返回結(jié)果信息。
瀏覽器端根據(jù)服務(wù)器返回的信息對(duì)用戶做出一定的提示。
不過由于我的空間不支持任何服務(wù)器段語言,所以把本應(yīng)在服務(wù)器的邏輯搬到了瀏覽器,由JavaScript來做,服務(wù)器只負(fù)責(zé)提供一個(gè)用戶名的列表。最后的效果如下,試著輸入test,cainiao8這些用戶名,都會(huì)顯示已注冊(cè)。
JavaScript代碼分析
首先,當(dāng)文檔載入完畢的時(shí)候,給表格設(shè)置change事件的響應(yīng)函數(shù)ajaxValidate,代碼如下:
程序代碼
addEventSimple(window,'load',function(){
var test = document.getElementById('username');
addEventSimple(test,'change',ajaxValidate);
}
這樣,當(dāng)用戶名文本框內(nèi)的值改變之后,就會(huì)調(diào)用ajaxValidate函數(shù),其代碼如下:
程序代碼
function ajaxValidate(){
var options = {
url:'ajax/ajaxUsernames.xml',
listener:callback,
method:'GET'
}
var request = createRequest(options);
request.send(null);
}
它會(huì)使用之前介紹的createRequest函數(shù)初始化一個(gè)XMLHttpRequest對(duì)象,并且將它發(fā)送到服務(wù)器,請(qǐng)求ajaxUsernames.xml文件。
最后就是callback函數(shù)了:
程序代碼
復(fù)制代碼 代碼如下:
function callback(){
var xmlDoc = this.responseXML;
var root = xmlDoc.getElementsByTagName('root')[0];
var nodes = root.getElementsByTagName("username");
var currentNode = null;
var username = document.getElementById('username').value;
for(var i = 0; i < nodes.length; i++) {
currentNode = nodes[i];
if(username == currentNode.childNodes[0].nodeValue){
document.getElementById('test').innerHTML = '對(duì)不起!'+username+'已經(jīng)被注冊(cè)。';
return;
}
}
document.getElementById('test').innerHTML = '用戶名' + username +'可以使用!';
}
callback函數(shù)在已經(jīng)存在的用戶名搜索當(dāng)前用戶輸入的名字,判斷是否已經(jīng)存在。
看完上述內(nèi)容,你們掌握Ajax 中怎么驗(yàn)證用戶名是否存在的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
本文題目:Ajax中怎么驗(yàn)證用戶名是否存在-創(chuàng)新互聯(lián)
標(biāo)題URL:http://jinyejixie.com/article10/egedo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制開發(fā)、外貿(mào)建站、App設(shè)計(jì)、Google、網(wǎng)站改版、軟件開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容