Question

我想要一个搜索框，当我点击搜索按钮而不重新加载页面时，它会在其下方显示结果。为此，我称之为ShowUsers（str）的js函数像这样

 function showUser(str) {
 if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
} else { 
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
       document.getElementById("txtHint").innerHTML =                  

   xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","getuser.php?q="+str,true);
    xmlhttp.send();
}
}

这样的html表单：

 <form>
 <input type="text" name="q"/>
 <script type="text/javascript">var x = document.getElementById("q").value;     </script>
 <input type="button" value="search" onclick="showUser(x)">
 </form>
 <br>
 <div id="txtHint"><b>Person info will be listed here...</b></div>

我有一个php文件显示名为GetUser.php的结果

我认为var x deos传递给输入标签中的ShowUser（str）函数我认为这不是将js var传递给html事件的正确方法那么我该怎么做才能显示数据

Answer 1

直接在showUser函数中访问 document.getElementById（“q”）。value ，而不是将x传递给showUser函数。

function showUser() {
 var str = document.getElementById("txtHint").value;
 if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
} else { 
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
       document.getElementById("txtHint").innerHTML =                  

   xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","getuser.php?q="+str,true);
    xmlhttp.send();
}
}

在搜索框中动态显示结果

1 个答案: