0

我正在编写一个井字游戏并实现 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 的名称是什么？- 回答伊利诺伊州，它将返回下一个问题的答案，“我最喜欢的动物是什么？ - 即企鹅。

任何建议将不胜感激。如果需要更多代码，请告诉我。

4

1 回答 1

1

我将通过您的代码并留下一些评论（有些很明显，但请耐心等待）。也许你会发现它们很有帮助。

这些变量是全局的。它们可以随时从任何功能中更改。

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 响应到来并执行上述回调时，正确答案变量将保存下一个问题的值，而不是这个问题。

    if(turn % 2 == 0){
        return "X Plays: " + askQuestion + " = "; 
    }
    else{
        return "O Plays: " + askQuestion + " = ";
    }
}

我不确定这是否对您有帮助。您可以将其余代码添加到问题中，我会给您一个正确的答案。

更新

在我看来，你做的一切都错了。您应该首先加载问题，然后设置计时器。

这一行在这里，它返回现有的askQuestion，但加载下一个问题和答案。

document.getElementById('playerDisplay').innerHTML= printEquation();

Ajax 调用不像您期望的那样工作，它不是一个返回结果的函数。相反，当您发送请求时，它会在准备好时回叫您。这都是错误的。

这是你应该做的：

  1. 发送 ajax 调用以获取问题 (xmlhttp.send)
  2. 当服务器响应问题（onreadystatechange 事件）时，启动计时器并显示问题
  3. 用户现在看到问题并可以点击按钮
  4. 用户回答或时钟超时
  5. 返回 1
于 2012-11-14T12:35:40.400 回答