2015-04-01 71 views
0

我想通過下拉菜單使用W3學校網站的代碼實現一個簡單的數據存儲在MySQL數據庫中的過濾器(請記住我對javaScript非常新!) 。但是,Ajax腳本不會返回任何結果。任何幫助讚賞。簡單的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> 

回答

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); 
}