javascript - 如何构建用户名验证器

Question

我想使用 javascript 中的 php 和 xmlHttp 请求制作大使 ID 验证器(如用户名验证器)。我想向 php 文件发送 xmlHttp 请求，并且该 php 文件应该返回一个整数值，如“1”或“0”。通过使用 javascript 读取该内容，它应该更改消息并禁用或启用提交按钮。所以我写了下面的代码，但是 javascript 不起作用。 php 似乎工作得很好，但在整数之前有一个换行符。线路制动是否导致 JavaScript 无效？

这是 JavaScript，

<script>
function checkambassadorid(str){

if (str=="") {
document.getElementById("availability").innerHTML="";
return;
} 

xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {

if(parseInt(this.responseText) === "0"){
document.getElementById("availability").innerHTML='<span class="text-success">Username Available</span>';
document.getElementById("submitter").disabled = false;

} else {

document.getElementById("availability").innerHTML='<span class="text-success">Username Not Available</span>';
document.getElementById("submitter").disabled = true;
}
xmlhttp.open("GET","ajax.php?data=checkambassadorid&ambassadorid="+str,true);
xmlhttp.send();
}
}
</script>

这是 HTML，

Ambassador ID:
<input type="number" onkeyup="checkambassadorid(this.value)" id="ambassadorid" name="ambassadorid"> <span id="availability"></span>

还有 PHP，

if($_GET['data'] == 'checkambassadorid'){

        mysqli_set_charset($con,"utf8");

        if(isset($_GET["ambassadorid"])){
             $ambassadorid = mysqli_real_escape_string($con, $_GET["ambassadorid"]);
             $query = "SELECT * FROM ambassadordb WHERE ambassadorID = '".$ambassadorid."'";
             $result = mysqli_query($con, $query);
             echo intval(mysqli_num_rows($result));
            }

    }

Answer 1

我认为@dave 解决了你的问题，但我想提出一种不同的方法。

您可以返回一个 JSON 有效负载，指示用户名可用(以及任何其他相关数据，例如建议名称(如果请求的名称被采用))，而不是使用二进制值进行响应。

if($_GET['data'] == 'checkambassadorid'){

    mysqli_set_charset($con,"utf8");

    if(isset($_GET["ambassadorid"])){
         $ambassadorid = mysqli_real_escape_string($con, $_GET["ambassadorid"]);
         $query = "SELECT * FROM ambassadordb WHERE ambassadorID = '".$ambassadorid."'";
         $result = mysqli_query($con, $query);

         $usernameIsAvailable = !(bool)intval(mysqli_num_rows($result));

         $obj = new class{};
         $obj->username = '$_GET["ambassadorid"]';
         $obj->isAvailable = $usernameIsAvailable;
         if(!$usernameIsAvailable) {
             $obj->suggestions = ['generated', 'list', 'of', 'suggested', 'names'];
         }

         print json_encode($obj);
    }
}

然后在你的JS中

const o = JSON.parse(this.responseText);
if(o.isAvailable) {
    document.getElementById("availability").innerHTML='<span class="text-success">Username Available</span>';
} else {
    document.getElementById("availability").innerHTML='<span class="text-success">Username Not Available</span>';
}
    document.getElementById("submitter").disabled = !o.isAvailable;

您甚至可以在响应中包含一条消息，以完全消除 if(o.isAvailable)。