为什么不会这个AJAX脚本工作本地主机上运行

我试着在我的本地机器上运行Windows 7家庭高级版，Apache，PHP和MySQL，但它不会返回任何结果到浏览器的这个AJAX示例。在这里读了几篇文章后，我下载萤火，从萤火虫控制台 - >所有我所得到的是这样的：为什么不会这个AJAX脚本工作本地主机上运行

GET http://localhost/dev/ajax/ajax-example.php?age=100&wpm=100&sex=m 200 OK 1.01s

响应

Query: SELECT * FROM ajax_example WHERE sex = 'm' AND age <= 100 AND wpm <= 100 
<br /><table><tr><th>Name</th><th>Age</th><th>Sex</th><th>WPM</th> 
</tr><tr>td>Frank</td><td>45</td><td>m</td><td>87</td></tr><tr><td>Regis</td> 
<td>75</td><td>m</td><td>44</td></tr></table>

上面这个东西应该怎么去broswer。该脚本似乎工作得很好，除了div不会刷新新的内容。

这是一个浏览器问题或Windows/JavaScript问题。我需要做些什么来完成这项工作？能否请你帮忙。

这里是教程页，我从这里得到了所有。

http://www.tutorialspoint.com/ajax/ajax_database.htm

本页面ajax.html

<html> 
<body> 
<script language="javascript" type="text/javascript"> 
<!-- 
//Browser Support Code 
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.value = ajaxRequest.responseText; 
    } 
} 
// Now get the value from user and pass it to 
// server script. 
var age = document.getElementById('age').value; 
var wpm = document.getElementById('wpm').value; 
var sex = document.getElementById('sex').value; 
var queryString = "?age=" + age ; 
queryString += "&wpm=" + wpm + "&sex=" + sex; 
ajaxRequest.open("GET", "ajax-example.php" + queryString, true); 
ajaxRequest.send(null); 
} 
//--> 
</script> 
<form name="myForm"> 
Max Age: <input type="text" id="age" /> <br /> 
Max WPM: <input type="text" id="wpm" /> 
<br /> 
Sex: <select id="sex"> 
<option value="m">m</option> 
<option value="f">f</option> 
</select> 
<input type="button" onclick="ajaxFunction()" value="Query MySQL"/> 
</form> 
<div id="ajaxDiv">Your result will display here</div> 
</body> 
</html>

这个网页是Ajax的使用example.php

<?php 
$dbhost = "localhost"; 
$dbuser = "root"; 
$dbpass = "norman"; 
$dbname = "test"; 
    //Connect to MySQL Server 
mysql_connect($dbhost, $dbuser, $dbpass); 
    //Select Database 
mysql_select_db($dbname) or die(mysql_error()); 
    // Retrieve data from Query String 
$age = $_GET['age']; 
$sex = $_GET['sex']; 
$wpm = $_GET['wpm']; 
    // Escape User Input to help prevent SQL Injection 
$age = mysql_real_escape_string($age); 
$sex = mysql_real_escape_string($sex); 
$wpm = mysql_real_escape_string($wpm); 
    //build query 
$query = "SELECT * FROM ajax_example WHERE sex = '$sex'"; 
if(is_numeric($age)) 
    $query .= " AND age <= $age"; 
if(is_numeric($wpm)) 
    $query .= " AND wpm <= $wpm"; 
    //Execute query 
$qry_result = mysql_query($query) or die(mysql_error()); 

    //Build Result String 
$display_string = "<table>"; 
$display_string .= "<tr>"; 
$display_string .= "<th>Name</th>"; 
$display_string .= "<th>Age</th>"; 
$display_string .= "<th>Sex</th>"; 
$display_string .= "<th>WPM</th>"; 
$display_string .= "</tr>"; 

// Insert a new row in the table for each person returned 
while($row = mysql_fetch_array($qry_result)){ 
    $display_string .= "<tr>"; 
    $display_string .= "<td>$row[name]</td>"; 
    $display_string .= "<td>$row[age]</td>"; 
    $display_string .= "<td>$row[sex]</td>"; 
    $display_string .= "<td>$row[wpm]</td>"; 
    $display_string .= "</tr>"; 

} 
echo "Query: " . $query . "<br />"; 
$display_string .= "</table>"; 
echo $display_string; 
?>

来源

2012-07-19 Norman

ajaxDisplay.value = ajaxRequest.responseText;这里是错误的，将其更改为例子来ajaxDisplay.innerHTML = ajaxRequest.responseText; 和MB使用jquery或其他框架这样的琐碎任务？

来源

2012-07-19 12:03:19

如果它是微不足道的，为什么使用jQuery？有点像打开胡桃木很容易，所以使用大锤让它更容易。 – epascarello 2012-07-19 12:11:36

您的建议工作。感谢您的帮助。它实际上是该网站的错误。它的ajaxDisplay.value = ajaxRequest.responseText;在这个例子中，但是ajaxDisplay.innerHTML = ajaxRequest.responseText;在他们的网站实际使用的代码中。 – Norman 2012-07-19 12:17:35

2 epascarello 这是微不足道的，但对于作者不是，用jquery他可以做到这一点3次少代码，对于最终用户它是没有问题，等待更多0.01s – 2012-07-19 12:22:44

在回调函数

ajaxRequest.onreadystatechange = function(){ 
    if(ajaxRequest.readyState == 4){ 
     var ajaxDisplay = document.getElementById('ajaxDiv'); 
     ajaxDisplay.value = ajaxRequest.responseText; 
    } 
}

我不认为ajaxDisplay.value将工作！

改用

ajaxDisplay.innerHTML = ajaxRequest.responseText;

来源

2012-07-19 12:21:47

:(花了一些时间来键入;） – 2012-07-19 12:22:57

为什么不会这个AJAX脚本工作本地主机上运行

回答

相关问题