用戶注冊時，需要填寫個人信息，其中包括用戶名。當(dāng)用戶輸入完成時，JavaScript 需要及時檢測用戶名是否存在，如果存在給出提示，請用戶更換用戶名。

當(dāng)然，這個步驟可以在用戶提交表單以后由后臺程序檢測，如果用戶名已存在，用戶需要返回注冊頁面重新填寫用戶名，而前面填寫的其他信息也隨著網(wǎng)頁的跳轉(zhuǎn)已經(jīng)過期，全部需要重填，這對用戶來說是極大的傷害。

因此，有必要使用 AJAX 在用戶不提交信息的情況下及時檢測用戶名是否存在。

前臺代碼：

請輸入用戶名：

document.getElementById("demo").οnblur=function(){ // 輸入框失去焦點

var thisNode=this;

var span=document.getElementById("result");

var xmlhttp;

try{

// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}catch(e){

// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function(){

if(xmlhttp.readyState<4){ // 正在交互

span.style.color="blue";

span.innerHTML="正在檢測...";

}

if (xmlhttp.readyState==4 && xmlhttp.status==200){ // 請求成功

if(parseInt(xmlhttp.responseText)){ // 將服務(wù)器返回的數(shù)據(jù)轉(zhuǎn)換為整數(shù)

span.style.color="red";

span.innerHTML="抱歉，您填寫的用戶名已經(jīng)存在！";

}else{

span.style.color="green";

span.innerHTML="恭喜你，填寫正確！";

}

}

}

xmlhttp.open("POST","/demo/javascript/ajax/ajaxDemo.php?action=checkUserName",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("username="+thisNode.value);

}

后臺代碼(PHP)：

if($_GET['action']=="checkUserName"){

// 為簡單起見，這里不再查詢數(shù)據(jù)庫，使用 3 個用戶名作為示例

if(

$_POST['username']=="admin"||

$_POST['username']=="xiaoming"||

$_POST['username']=="zhangsan"

){

echo 1;

}else{

echo 0;

}

}

?>

實例演示(輸入完成，請將焦點離開輸入框)：

請輸入用戶名：

說明："admin"、"xiaoming"和"zhangsan"三個用戶名已存在。

總結(jié)

以上是生活随笔為你收集整理的php异步检测用户名是否已经存在,AJAX实例-检测用户名是否存在的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。