0

首先很抱歉，如果这真的很难理解，但我解释起来很复杂。而且我对这个 Ajax 事情也很陌生。

假设我有 page1.php，其中有以下脚本：

function change(str) {

    if (str=="") {
        document.getElementById("servicetxt").innerHTML="";
        return;
    }
    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("servicetxt").innerHTML=xmlhttp.responseText;
            }
    }
    xmlhttp.open("GET","change.php?a="+str,true);
    xmlhttp.send(); 
}

在 change.php 上，我正在制作一个文本字段，因此当您在 page1.php 上调用 change 函数时它会出现。但是，如果我想在用户输入此文本字段时发出新请求（这样的建议响应：w3schools ajax）怎么办？我尝试在 change.php 中执行以下操作：

<script type="text/javascript">
function gethint(str) {

        if (str=="") {
            document.getElementById("hint").innerHTML="";
            return;
        }
        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("hint").innerHTML=xmlhttp.responseText;
                }
        }
        xmlhttp.open("GET","gethint.php?a="+str,true);
        xmlhttp.send();

}
</script>
<?
echo "<input type=\"text\" name=\"varenummer\" onkeyup=\"gethint(this.value)\">";
echo "<p>Suggestions: <span id=\"hint\"></span></p>"; 
?>

但这不起作用。可能没有一个快速简单的答案，如果是这样的话，请你指导我一篇好的文章/教程，它可以教我如何解决这个难题:)

4

1 回答 1

1

首先，没有理由（除非您打算稍后进行重大更改）通过 AJAX 调用获取文本字段。该字段和控制它的脚本应该是您的主要 page1.php 文件的一部分，但该字段本身应该隐藏，直到change()被调用，可能是通过单击页面上的按钮。

您可以通过添加属性“隐藏”并将其设置为 true 来隐藏该字段，然后添加样式“显示：无”以使其在浏览器中工作：

<input type="text" name="varenummer" onkeyup="gethint(this.value)" hidden=true style="display:none"/>

然后，在change()：

document.getElementByName("varenummer").setAttribute("hidden","false");
document.getElementByName("varenummer").style.display = "inline";

gethint()这样，让脚本运行没有问题。请注意，我只是显示了您的输入字段的 HTML，而不是您的 php 脚本回显的引用字符串。

编辑

好吧，所以，自从我尝试在没有 jQuery 的情况下做 JS 以来已经有很长时间了，但我发现我使用jsFiddle做错了什么。没有.getElementByName()功能。有一个getElementsByName()（复数），但由于某种原因它不能正常工作。因此，我添加了一个id参数并将其设置为等于原始名称参数。现在我们可以使用getElementById它了，它按预期工作。

function change() {
  document.getElementById("varenummer").setAttribute("hidden","false");
  document.getElementById("hintP").setAttribute("hidden","false");
  document.getElementById("varenummer").style.display = "inline";
  document.getElementById("hintP").style.display = "block";
}

请注意，我还在“建议”段落中添加了类似的钩子，因此它会在文本字段出现时出现。我认为您不需要对您的gethint()功能进行任何更改，但我无法从这里进行测试。

于 2013-01-20T22:58:17.743 回答