在已請求的頁面中創建xmlhttprequest

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(); 
}

在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參數並將其設置為與原始name參數相等。 現在我們可以使用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";
}

注意，我還向“ Suggestions”段落添加了類似的鈎子，因此它將在文本字段出現時顯示。 我認為您不需要使用gethint()函數進行任何更改，但是我無法從此處進行測試。