简单的Ajax过滤器不返回结果

时间:2015-04-01 17:09:47

标签: php mysql ajax filter

我正在尝试使用来自W3学校网站的代码通过下拉菜单实现存储在MySQL数据库中的简单数据过滤器(请记住我对javaScript很新!)。但是,Ajax脚本不返回任何结果。任何帮助赞赏。

ajax.html

<html>
<head>
<script>
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
     } else { 
        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","getuser.php?q="+str,true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>

<form>
 <select name="genre" onchange="showUser(this.value)">
  <option value="">Select a genre:</option>
  <option value="1">clubbing</option>
  <option value="2">comedy</option>
  </select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>

</body>
</html>

getuser.php

<!DOCTYPE html>
<html>
<head>
<style>
table {
    width: 100%;
    border-collapse: collapse;
}

 table, td, th {
    border: 1px solid black;
    padding: 5px;
}

th {text-align: left;}
</style>
</head>
 <body>

<script type = "text/javascript" src="ajax.html"></script>

<?php
$q = intval($_GET['q']);

 $con = mysqli_connect('localhost','root','','python');
 if (!$con) {
     die('Could not connect: ' . mysqli_error($con));
 }

 mysqli_select_db($con,"ajax");
$sql="SELECT * FROM info WHERE id = '".$q."'";
 $result = mysqli_query($con,$sql);

 echo "<table>
 <tr>
 <th>Venue</th>
 <th>Date</th>
 <th>Genre</th>
 </tr>";
 while($row = mysqli_fetch_array($result)) {
     echo "<tr>";
     echo "<td>" . $row['venue'] . "</td>";
     echo "<td>" . $row['datez'] . "</td>";
     echo "<td>" . $row['genre'] . "</td>";
     echo "</tr>";
 }
 echo "</table>";
 mysqli_close($con);
 ?>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

找到了一个解决方案,如果有人遇到类似的事情......

function ajaxFunction(){
 var ajaxRequest;  // The variable that makes Ajax possible!

 try{
   // Opera 8.0+, Firefox, Safari
   ajaxRequest = new XMLHttpRequest();
 }catch (e){
   // Internet Explorer Browsers
   try{
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
   }catch (e) {
      try{
         ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }catch (e){
         // Something went wrong
         alert("Your browser broke!");
         return false;
      }
   }
 }
        // Create a function that will receive data 
 // sent from the server and will update
 // div section in the same page.
 ajaxRequest.onreadystatechange = function(){
   if(ajaxRequest.readyState == 4){
      var ajaxDisplay = document.getElementById('ajaxDiv');
      ajaxDisplay.innerHTML = ajaxRequest.responseText;
   }
 }
 // Now get the value from user and pass it to
 // server script.
 var gen = document.getElementById('gen').value;
 var queryString = "?gen=" + gen ;
 ajaxRequest.open("GET", "getuser.php" + 
                              queryString, true);
 ajaxRequest.send(null); 
}