使用Ajax技術檢測使用者名稱是否被佔用

CBD發表於2019-12-01

在使用者登錄檔單中，使用Ajax技術檢測使用者名稱是否被佔用；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax技檢測使用者名稱</title>
</head>
<body>
    <h2>Ajax技檢測使用者名稱</h2>
    <form name="form_register">
        使用者名稱：<input type="text" id="username" name="username" size="20">&nbsp;<input type="button" value="檢視使用者名稱是否被佔用" onclick="chkUsername()">
    </form>
    <script>
    function chkUsername(){
        var username = form_register.username.value;
        if(username == ""){    //判斷使用者名稱是否為空
            alert("請輸入使用者名稱！");
        }else{
            var xmlObj;    // 定義XMLHttpRequest物件
            if(window.ActiveXObject){   // 如果是瀏覽器支援ActiveXObject物件則建立ActiveXObject物件；
                xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
            }else if(window.XMLHttpRequest){  // 如果是瀏覽器支援XMLHttpRequest物件則建立XMLHttpRequest物件；
                xmlObj = new XMLHttpRequest;
            }
            xmlObj.onreadystatechange = callBackFun;  //指定回撥函式
            xmlObj.open('GET','username.json',true);   //使用get方法呼叫username.txt檔案
            xmlObj.send(null);    //不傳送任何資料
            function callBackFun(){   //定義回撥函式
                if(xmlObj.readyState == 4 && xmlObj.status == 200){   //如果伺服器已經傳回資訊並沒有發生錯誤
                    var nameArr = JSON.parse(xmlObj.responseText);
                    console.log(nameArr);
                    // var nameArr = xmlObj.responseText.split("|");  //將返回值以“|”為分隔符分割為陣列
                    var result = true;  // 定義變數；
                    for(var i = 0;i<nameArr.length;i++){
                        if(nameArr[i] == username){  //判斷使用者是否在陣列中已經存在
                            result = false;   //為變數重新賦值；
                            break;   //退出for迴圈
                        }
                    }
                    if(!result){   //如果輸入的使用者名稱在陣列中已經存在
                        alert("該使用者名稱已經被他人使用！");
                    }else{   //如果輸入的使用者名稱在陣列中不存在
                        alert("恭喜，該使用者名稱未被使用！")
                    }
                }
            }
        }
    }
    </script>
</body>
</html>

username資料
[
    "root",
    "admin",
    "user"
]
複製程式碼

相關文章