使用 ajax 和 php 页面检索列表


Retrieving a list using ajax and a php page

我正在尝试从由两个下拉列表组成的页面中传递两个变量,并进行一些计算并将第三个列表检索到div中。我怎样才能让它工作。?这是我的代码。

 <HTML>
     <HEAD>
       <script src="jquery-1.10.2.js"></script>
        <script type="text/javascript">
           $(document).ready(function(){
                $("#day").change(function(){
                      var day=$("#day").val();
                      var doctor=$("#doctor").val();
                      $.ajax({
                          type:"post",
                          url:"time.php",
                          data:"day="+day+"&doctor="+doctor,
                          success:function(data){
                             $("#testing").html(data);
                          }
                      });
                });
           });
       </script>
      </HEAD>
<BODY>
    <FORM action="post">
   <SELECT id="doctor">//some options</SELECT>      
   <SELECT id="day">//some option </select>

     <div id="testing">
   BLA BLA BLA

      </div>
    </BODY>

 </HTML>

按时.php页面我进行一些计算以检索位值为"1"的列名并将结果存储到下拉列表中

         <?
    $con=mysqli_connect("localhost","clinic","myclinic","myclinic");
    // Check connection
    if (mysqli_connect_errno())
    {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }
    $doctor = $_POST['doctor'];
    $day = $_POST['day'];
    $query="SELECT * FROM schedule WHERE doctor='" .$doctor."'AND day='"    .$day. "'";
            //Some calculations and store the result into a list

    $result = mysqli_query($con, $query);
    if(!$result) 
    {
        echo "Failed to execute the query";
    }
    echo" 
    <table><tr><td>&nbsp;Time&nbsp;</td>
    <td>&nbsp;<select name='time'>";
    $i = 0;                                 //Initialize the variable which passes over the array key values
    $row = mysqli_fetch_assoc($result);    //Fetches an associative array of the row
    $index = array_keys($row);             // Fetches an array of keys for the row.
    while($row[$index[$i]] != NULL)
    {
        if($row[$index[$i]] == 1) {             
            echo $index[$i];
            echo "<option value='"  . $index[$i]."'>" . $index[$i] . "</option>";
        }
        $i++;
    }       
    echo "</select>";
      ?>

在包含三个下拉列表的主页上,您应该有一个 js 代码,该代码接收前两个列表的值,并使用这些值向 php 服务器发送查询。

服务器上的 php 脚本应该将结果输出到 XML 文件中,这就是 AJAX 名称的来源。

然后,主页上的 js 应该检索 xml 文件,解析它并将结果填充到第三个列表中。

在此过程中没有帖子/获取!

这是一个例子

function updatehours()
{
  document.getElementById('minute').disabled=true;
  document.getElementById('hour').disabled=false;
  // update xml at server side.
  var head = document.getElementsByTagName('body').item(0);
  var script = document.createElement('script');
  script.setAttribute( 'type', 'text/javascript' );
  script.setAttribute( 'src', 'updatehours.php?file=92007bb48c.xml&date='+document.getElementById('datepicker').value);
  script.deleteFromDocument;
  head.insertBefore( script, head.firstChild );
  setTimeout('processhours()',500);
  setTimeout('processminutes()',1000);
}
function processhours()
{
  var xmlhttp;
  var txt,xx,x,i;
  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)
    {
      txt="";
      x=xmlhttp.responseXML.documentElement.getElementsByTagName("H");
      for (i=0;i<x.length;i++)
      {
        try
        {
          txt=txt + "<option value='"" + x[i].firstChild.nodeValue + "'">" + x[i].firstChild.nodeValue + "</option>";
        }
        catch (er)
        {
        }
      }
    }
    document.getElementById('hour').innerHTML=txt;
  }
  xmlhttp.open("GET","hours/92007bb48c.xml",true);
  xmlhttp.send();
}

请注意,updatehours.php 是服务器中计算结果并将其放入 xml 文件中的脚本。

该死的,我以前应该尝试过。我认为我下载的源代码不支持 ajax。将源更改为 http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

它奏效了!

无论如何,谢谢你们的输入:)