span标签不能使用ajax在线名称检查

时间:2014-06-17 05:21:21

标签: javascript php html ajax

这是我在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 文件

<?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;
   }
?>

当我使用警告时它正常工作(当然,我们不能使用警报,因为它会变得过于刺激)但是当我使用 span标记时它不起作用正确地给予

  

用户名存在用户可用

作为输出,而不是在我们在文本字段中输入的每个字符后检查..

我该如何纠正?

1 个答案:

答案 0 :(得分:1)

请勿关闭并打开if else语句之间的脚本。

您可以轻松地使用jQuery库实现此目的。从这里下载jQuery library。您可以在页面底部包含此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>