AJAX xmlhttp.open未運行腳本

我正在修改此處找到的教程：http://www.w3schools.com/ajax/ajax_aspphp.asp 以便自動完成名稱庫存儲在數據庫中。我添加了一個按鈕，允許用戶爲數據庫添加一個名稱，如果它尚未在數據庫中。當我點擊按鈕時，該方法會觸發，但是addName（）方法中指定的php腳本不會執行。這很奇怪，因爲showHint（）方法中定義的腳本會執行。這是我的JavaScript（這是所有必須顯示的）。我省略了腳本：AJAX xmlhttp.open未運行腳本

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript"> 
     function showHint(str) 
     { 
      var xmlhttp; 
      if (str.length==0) 
      { 
       document.getElementById("txtHint").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("txtHint").innerHTML=xmlhttp.responseText; 
       } 
      } 
      xmlhttp.open("GET","gethint.php?q="+str,true); 
      xmlhttp.send(); 
     } 

     function addName(str){ 
      var xmlhttp; 
      if (window.XMLHttpRequest) 
      {// code for IE7+, Firefox, Chrome, Opera, Safari 
       xmlhttp=new XMLHttpRequest(); 
      } 
      else 
      {// code for IE6, IE5 
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      xmlhttp.open("GET","addName.php?q="+str,true); 
      xmlhttp.send(); 
     } 
    </script> 
</head> 
<body> 

<h3>Start typing a name in the input field below:</h3> 
<form action=""> 
    First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" /> 
</form> 
<p>Suggestions: <span id="txtHint"></span></p> 
<button type="button" onclick="addName(document.getElementById('txt1').value)">Add Name</button> 

</body> 
</html>

來源

2012-06-15 Julian

我認爲jQuery的AJAX是越多越好，然後JavaScript的AJAX使用.... – Hardik

你有Chrome或一些其他瀏覽器與開發者工具？您應該打開Chrome開發人員工具（或同等版本）。使用Chrome執行此操作：F12，單擊網絡選項卡，然後單擊您的按鈕。您應該看到提出的請求。您可以點擊它來查看回復。也許PHP正在輸出一個錯誤。你可以檢查，並讓我們知道你的發現，如果你不能用這些信息自己修復:) – Paulpro

像這樣：

function getXhr() { 
     var xmlhttp; 
     if (window.XMLHttpRequest) {// code for IE7+, FF, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
     } 
     else { // code for IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     return xmlhttp; 
    } 

    function showHint(str) { 
     var xmlhttp; 
     if (str.length==0) { 
      document.getElementById("txtHint").innerHTML=""; 
      return; 
     } 
     xmlhttp = getXhr(); 
     xmlhttp.onreadystatechange= function() { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
      } 
     }; 
     xmlhttp.open("GET","gethint.php?q="+str,true); 
     xmlhttp.send(); 
    } 

    function addName(str) { 
     var xmlhttp = getXhr(); 
     xmlhttp.onreadystatechange= function() { 
     ...your logic here... 
     }; 
     xmlhttp.open("GET","addName.php?q="+str, true); 
     xmlhttp.send(); 
    }

來源

2012-06-15 19:09:35 Cheeso

爲什麼我需要在onreadystatechange函數中實現邏輯？我想要做的就是運行一個php腳本。我不關心readystate何時更改。這確實解決了這個問題。我只是不明白爲什麼我需要它。 – Julian

嗯，我現在明白了。我不知道爲什麼addName不適合你。這可能是因爲我的重新分解糾正了潛伏在你的代碼中的一些其他潛在問題。沒有在調試器中實際嘗試它（FF，Chrome，IE的F12瀏覽器工具），我只能猜測。在任何情況下，最好使用適當的編碼實踐，比如將常用邏輯分解爲函數（'getXhr（）'）。要小心依賴W3school - 他們經常表現出不好的做法，並在某些情況下，信息是完全錯誤的。 – Cheeso

越來越多我一直聽到關於W3schools的這個消息！但是，即使在重構代碼之後，如果您已經提示我發生了這種奇怪的事情：在您寫下「......您的邏輯......」的區域沒有代碼，腳本從未運行。但是，當我從showHint（）方法插入完全相同的邏輯時，腳本確實會運行。非常的風格。這樣一個簡單的目標。我只需要在按鈕上運行一個php腳本！ – Julian

添加onreadystatechange並查看http狀態調用，看看它是否是錯誤。

使用像Fiddler或Firebug這樣的工具來查看請求是否消失。

而你應該是url編碼str。

來源

2012-06-15 19:07:27 epascarello

添加onreadystatechange並在調用內部實現邏輯解決了這個問題。但爲什麼？這只是AJAX的規則？顯然，我不明確需要onreadystatechange方法，因爲我想要做的就是在服務器onclick上運行腳本。 – Julian

請更改您的代碼這樣

<form action=""> 
    First name: <input type="text" id="txt1" value="ABC-XYZ" onkeyup="showHint(this.value)" /> 
</form>

來源

2012-06-15 19:07:37 Hardik

好的，這個工程。腳本跑了。請告訴我爲什麼這個工程雖然......非常奇怪的修復。 – Julian

因爲在你的函數showHint（str）檢查條件 if（str.length == 0）並且如果它是true它清除innerhtml並返回所以什麼也沒有發生 – Hardik

如果這個我的回答對你有幫助給它正確和1+以上，這將有助於其他人 – Hardik

AJAX xmlhttp.open未運行腳本

回答

相關問題