使用ajax进行在线名称检查时，Span标签不工作

span tag not working in online name checking using ajax

本文关键字：Span 标签 工作 检查 ajax 在线 使用      更新时间：2023-09-26

这是我的JavaScript代码，调用check.php文件检查数据库中用户的在线存在

<html>
    <input type = "text" name="txt1" id="user" onKeyUp="check_username(this.value)"> <br>
<script>
    var xmlhttp = false;
    if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        xmlhttp = new XMLHttpRequest();
    }
    function check_username(str) {
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var arr = xmlhttp.responseText.split("^");
                document.getElementById("user").value = arr[1];
                if (arr[0] == 1) {
                    </script>
                    <span style="color:blue">Username exists</span>
                    <script>
                } else {
                </script>
                    <span style="color:green">user available</span>
                    <script>
                }
            }
            }
        xmlhttp.open("GET", "check.php?txt1="+str, true);
        xmlhttp.send();
    }
</script>
</html>

下面是check.php file

<?php
    mysql_connect("localhost", "root", "");
    mysql_select_db("check");
    $username = ($_REQUEST['txt1']);
    $a = 0;
    if (checkexistence($username)) {
        $a = 1;
        echo $a."^".$username;
    } else {
        $a = 0;
        echo $a."^".$username;
    }
    function checkexistence($username) {
        $check = mysql_query("select uname from t1");
        while ($row = mysql_fetch_array($check)) {
            if (strcmp($username, $row['uname']) == 0) {
                return true;
            }
        }
        return false;
   }
?>

当我使用alert时，它可以正常工作(当然，我们不能使用alert，因为它会变得太令人恼火)，但是当我使用span标签时，它不能正确工作仅给

用户名已存在

作为输出，而不是在文本域中输入每个字符后检查。

我该如何改正??

不要在if和else语句之间关闭和打开脚本。

您可以使用jQuery库轻松实现这一点。从这里下载jQuery库。您可以在页面底部包含这些jQuery文件，如

<script src="js/jquery.1.11.0.js" type="text/javascript"></script>

让我们用另一种方式做那件事。使用after()的jQuery方法在任意位置之间插入内容。

试试这段代码，

<input type = "text" name="txt1" id="user" onKeyUp="check_username(this.value)"> <br>
<span id="exist" style='color:blue'></span>
<span id="avail" style='color:green'></span>
<script>
    var xmlhttp = false;
    if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        xmlhttp = new XMLHttpRequest();
    }
    function check_username(str) {
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var arr = xmlhttp.responseText.split("^");
                document.getElementById("user").value = arr[1];
                if (arr[0] == 1) {
                    $("#avail").html();
                    $("#exist").html('Username exists');
                } else {
                    $("#exist").html();
                    $("#avail").html('User available');
                }
            }
            }
        xmlhttp.open("GET", "check.php?txt1="+str, true);
        xmlhttp.send();
    }
</script>
相关文章：