使用Ajax有一組數據庫派生的單選按鈕

我從來沒有使用Ajax之前，我玩了一些試圖學習它（我喜歡理解的東西，只是像jquery像一個同事建議之前）。我有一個以單選按鈕開始的頁面（選自數據庫的選項），該選項應該觸發新的單選按鈕（同樣，選項取自數據庫）。我首先簡單地展示了最初的'選擇'的結果，但是當我從單選按鈕中選擇一些內容時，沒有任何反應，但我不明白爲什麼。如果有人能夠告訴我爲什麼這不能達到我期望的效果，我會很喜歡它。使用Ajax有一組數據庫派生的單選按鈕

在此先感謝

主頁：

<html> 
    <head> 
    <script> 
     function showGlycopeptides(str) 
     { 
     var xmlhttp; 
     if (str=="") 
     { 
      document.getElementById("txtField").innerHTML=""; 
      return; 
     } 
     if (window.XMLHttpRequest) 
     { 
      xmlhttp=new XMLHttpRequest(); 
     } 
     else 
     { 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange=function() 
     { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
      document.getElementById("txtField").innerHTML=xmlhttp.responseText; 
      } 
     } 
     xmlhttp.open("GET","getglycopeptides.php?q="+str,true); 
     xmlhttp.send(); 
     } 
    </script> 
    <title>LeidenGlycoPeptide DataBase</title> 
    </head> 
    <body> 
    <h1>Welcome to the LeidenGlycoPeptide DataBase</h1> 
    <?php 
     $link = mysql_connect("localhost","reader","") or die (mysql_error()); 
     mysql_select_db('leidenGlycoPeptide') or die(); 
     $query = 'select protein from glycoPeptide'; 
     $result = mysql_query($query); 
     mysql_close($link); 
    ?> 
    <form> 
     <p>Select glycopeptide to search for (interactive dialog)</p> 
     <?php 
     echo"<select name=\"prec\" onchange=\"showGlycopeptides(this.value)\">"; 
     echo"<option value=\"\">select glycoprotein</option>"; 
     while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { 
      foreach ($line as $col_value) { 
      echo"<option value=\"$col_value\">$col_value</option>"; 
      } 
     } 
     echo"</select>"; 
     ?> 
    </form> 
    <br> 
    <div id="txtField"><b>Text field</b></div> 
    </body>

getglycopeptides.php：

<html> 
    <head> 
    <title>glyco</title> 
    </head> 
    <body> 
    <?php 
     $q=$_GET["q"]; 
     $link = mysql_connect("localhost","reader","") or die (mysql_error()); 
     mysql_select_db("leidenGlycoPeptide",$link) or die(); 
     $query = "select glycoType from run,glycoPeptide where run.id = glycoPeptide.id and glycoPeptide.protein like '".$q."'"; 
     echo "<select name=\"type\" onchange=\"foo\">"; 
     echo "<option value=\"\">select glycosylation</option>"; 
     while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) 
     { 
     foreach ($row as $col_value) 
      { 
      echo"<option value=\"$col_value\">$col_value</option>"; 
      } 
     } 
     echo "</select>"; 
     $result = mysql_query($query); 
     mysql_close($link); 
    ?> 
    </body> 
</html>

---- ---- EDITED

的代碼是編輯，以便它們可以作爲示例（用於其他人）。

來源

2013-01-11 Bas Jansen

我很抱歉發佈這個答案，但我還沒有解鎖發表評論的能力。

我的猜測是問題出在ajax請求中，因爲PHP文件getglycopeptides.php將返回一些東西，即使查詢參數沒有發送。

一個簡單的方法來驗證這是使用Chrome上的網絡面板或Firefox的螢火蟲控制檯面板。

當您從select中選擇不同選項時，請檢查是否正在創建新請求。

另一種方法是使用console.log（'Something'）;如果你在控制檯上看到'Something'被打印出來，那麼ajax就會被觸發。請記住，console.log在IE中不起作用。

只要先驗證一下，這樣我們就可以排除，我們可以發現問題。

來源

2013-01-11 15:51:49

哦，還有一件事我剛剛發現。你需要定義xmlhttp變量，而你沒有。只需在showGlycopeptides功能的開始處添加'var xmlhttp;' –

我喜歡Firebug的控制檯部分，給你一個upvote並接受這個答案。我設法發現了造成這種失敗的（非常愚蠢的）錯誤。 –

使用Ajax有一組數據庫派生的單選按鈕

回答

相關問題