Question

首先对不起，如果理解起来真的很复杂，但对我来说解释起来相当复杂。而且我对这个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(); 
}

on 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>"; 
?>

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

Answer 1

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

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

<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()函数更改任何内容，但我无法从此处测试。

在已请求的页面中创建xmlhttprequest

1 个答案:

修改