使用Ajax来获得一组顺序的DB派生单选按钮

时间:2013-01-11 15:05:03

标签: php html mysql ajax

我之前从未使用过Ajax,而且我正在尝试学习它(我喜欢在像jaery那样了解一些事情,就像同事建议的那样)。我有一个以单选按钮(从DB获取的选项)开始的页面,该选择应该触发新的单选按钮(同样,从DB获取的选项)。我开始只是简单地显示初始'选择'的结果,但是当我从单选按钮中选择一些东西并且我真的不明白为什么时没有任何反应。如果有人能够告诉我为什么这不符合我的预期,我会很高兴。

提前致谢

主页:

<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 ----

编辑代码以便它们可以作为一个例子(对于其他人)。

1 个答案:

答案 0 :(得分:2)

很抱歉发布此答案,但我没有发布评论的能力。

我的猜测是问题出现在ajax请求中,因为即使查询参数没有发送,PHP文件getglycopeptides.php也会返回一些内容。

验证这一点的简单方法是使用chrome上的网络面板或firefox firebug中的控制台面板。

当您从选择中选择其他选项时,请检查是否正在发出新请求。

另一种方法是使用console.log('Something');你得到ajax响应的地方,如果你看到在控制台中打印出“Something”,那么ajax就会被触发。请记住,console.log在IE中不起作用。

首先验证这一点,以便我们可以排除它,我们可以发现问题。