我正在编写一个井字游戏，并实现Ajax和Php，这两个对我来说都是新的。我看了其他一些讨论，但似乎找不到答案。我的js文件调用php，php反过来调用数据库并提取问题和答案——用户必须回答问题才能轮到他/她。但是，我的程序返回下一个问题的答案，而不是当前问题的答案。
这是我的php:
$con = mysql_connect('localhost', '412ygutstei', '412ygutstei');
if ($con)
if (!$con) {
die('Could not connect: ' . mysql_error());
}
$questionNum = $_POST['q_id'];
mysql_select_db("ygutstei_db", $con);
$result = mysql_query("SELECT q_id, question_type, text,description, answer FROM questions,questiontype WHERE q_id=".$questionNum."");
$row = mysql_fetch_array($result);
$question = $row['description']." ".$row['text']."?|".$row['answer'];
echo($question);
mysql_close($con);
我的js函数，它将调用php：
function countDown() {
var element = document.getElementById(elem);
element.innerHTML = secs;
if(secs == 15){
document.getElementById('playerDisplay').innerHTML= printEquation();
}
if(secs == 0){
clearInterval(clock);
turn++;
startTimer();
document.getElementById(answer).value = "";
}
else{
secs--;
}
}
var expect = ""; var randomQNumber; var correctAnswer; var askQuestion = "";
function printEquation(){
randomQNumber = randNumber(1,8);
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) {
var elements = xmlhttp.responseText.split("|");
//elements[0] = document.getElementById("question")
correctAnswer = elements[1];
expect = correctAnswer;
askQuestion = elements[0];
//alert(correctAnswer);
}
}
xmlhttp.open("POST","G_TicTacToe.php",true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send("q_id="+randomQNumber);
if(turn % 2 == 0){
return "X Plays: " + askQuestion + " = ";
}
else{
return "O Plays: " + askQuestion + " = ";
}
}
function matchAnswer(a) {
var b = document.getElementById(a).value;
document.getElementById(a).innerHTML = b;
if(expect.toUpperCase() == b.toUpperCase()){
clearInterval(clock);
answeredQuestion = true;
window.alert("Correct! ");
document.getElementById(a).value = "";
click();
}
else{
clearInterval(clock);
window.alert("Incorrect! The correct answer was: " + expect);
document.getElementById(a).value = "";
playerTurn();
startTimer();
}
调用matchAnswer()的html代码：
<input type="text" id="answer">
<button id="equals" onclick="matchAnswer('answer');";>Answer</button>
</div>
<div class="playerAnswer">
</div>
例如：如果输出为：X播放：State1的名称是什么？-回答伊利诺伊州，它将返回下一个问题的答案，"我最喜欢的动物是什么？"即企鹅。
如有任何建议，我们将不胜感激。如果需要更多的代码，请告诉我。
我将仔细阅读您的代码并留下一些注释(有些非常明显，但请耐心等待)。也许你会发现它们很有用。
这些变量是全局的。它们可以在任何时间从任何功能更改。
var expect = ""; var randomQNumber; var correctAnswer; var askQuestion = "";
下一部分是简单的xhr初始化。
function printEquation(){
randomQNumber = randNumber(1,8);
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
在执行ajax时，您应该了解(异步)事件和回调。在本部分中，您将向事件附加一个回调函数。回调是异步运行的，这意味着您不知道它何时运行。它可能在其余代码(或任何其他代码)之后或之前运行。
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var elements = xmlhttp.responseText.split("|");
//elements[0] = document.getElementById("question")
correctAnswer = elements[1];
expect = correctAnswer;
askQuestion = elements[0];
//alert(correctAnswer);
}
}
下面的代码肯定是在上面的回调之前执行的，因为您还没有将请求发送到服务器。
xmlhttp.open("POST","G_TicTacToe.php",true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send("q_id="+randomQNumber);
此部分打印askQuestion的当前值。我不确定您在代码中的哪里检查答案，但当来自服务器的ajax响应到来并执行上述回调时，correctAnswer变量将保存下一个问题的值，而不是这个问题的值。
if(turn % 2 == 0){
return "X Plays: " + askQuestion + " = ";
}
else{
return "O Plays: " + askQuestion + " = ";
}
}
我不确定这是否对你有帮助。你可以把剩下的代码添加到这个问题中，我会给你一个正确的答案。
更新
在我看来，你做的一切都错了。你应该先加载问题，然后设置计时器。
此行返回现有的askQuestion，但加载下一个问题和答案。
document.getElementById('playerDisplay').innerHTML= printEquation();
Ajax调用并不像您期望的那样工作，它不是一个返回结果的函数。相反，当你发送请求时，它会在准备好后给你回电话。这一切都错了。
这就是你应该做的：
- 发送ajax调用以获取问题(xmlhttp.Send)
- 当服务器响应问题(onreadystatechange事件)时，启动计时器并显示问题
- 用户现在看到问题并可以单击按钮
- 用户回答或时钟超时
- 返回到1