Question

这是我昨晚提出的另一个问题的后续跟进。我现在的问题不是脚本不起作用，而是当我的xmlhttprequest对象返回响应文本时，我得到一些非常奇怪的HTML输入元素重复。这是代码：

<!DOCTYPE HTML>

<?php

    if(!empty($_GET['uName']))
    {
        $r = mysql_connect("localhost", "root", "pass") or die("Couldn't connect to db");
        mysql_select_db("db", $r) or die ("Couldn't select db");
        $q = mysql_query("select * from users where uName = '{$_GET['uName']}'") or die("Couldn't query table");
        $data = mysql_fetch_assoc($q);
        mysql_close($r);
    }

?>

<html>

<head>

</head>

<body>

<form>

    <input type="text" name="fUName" onchange="ShowUser(fUName.value);" value="name" style="width:125px;">

</form>

<div id="display"><?php print "ID = {$data['id']}"; ?></div>

</body>

</html>

<script type='text/javascript'>

function ShowUser(name)
{
    if(name.length == 0)
    {
        document.getElementById("display").innerHTML = "Please enter a username to check";
        return;
    }
    if(window.XMLHttpRequest)
    {
        xmlhttp = new XMLHttpRequest();
    }
    else
    {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function()
    {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            document.getElementById("display").innerHTML = xmlhttp.responseText;
        }
    };

    xmlhttp.open("GET", "index.php?uName=" + name, true);
    xmlhttp.send();

}

</script>

这是一个奇怪的问题：

enter image description here

应该只有一个输入字段，并且是orginally，但是当我输入文本并且它失去焦点时，JS会被触发并打印出另一个输入字段。

请在一个脚本中忽略PHP，JS和HTML / CSS的不良做法，这应该是一个变得更糟的快速测试：）

我很困惑！

感谢您的帮助。

Answer 1

问题在于所有代码都在一个页面中。考虑一下：你加载index.php。在它全部显示之后，你再次调用同一页面（对于你的AJAX请求），所以你基本上是在说“嘿，我想让你再次尝试加载这个页面”，这就是为什么你最后会有重复的字段。 / p>

尝试将您的文件分离为index.php和getuser.php之类的东西。

JS bug：用xmlhttp响应文本重复输入字段

1 个答案: