AJAX и PHP: tic tac toe возвращает решение для следующего запроса

62
5

Я пишу игру tic tac toe и реализую Ajax и Php, оба из которых новы для меня. Я просмотрел несколько других обсуждений, но, похоже, не нашел ответа. Мой js файл вызывает 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();
}

html-код, который вызывает matchAnswer():

<input type="text" id="answer">
<button id="equals" onclick="matchAnswer('answer');";>Answer</button>
</div>
<div class="playerAnswer">

</div>

ex: если вывод: X Пьесы: Каково имя State1? - ответьте на Иллинойс, он вернет ответ на следующий вопрос: "Какое мое любимое животное?", то есть пингвин.

Любые предложения будут ценны. Если требуется больше кода, пожалуйста, дайте мне знать.

спросил(а) 2012-11-14T12:46:00+04:00 7 лет назад
1
Решение
44

Я пропущу ваш код и оставлю некоторые комментарии (некоторые довольно очевидны, но несут со мной). Может быть, вы найдете их полезными.

Эти переменные являются глобальными. Они могут быть изменены с любой функцией в любое время.

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 event), запустите таймер и покажите вопрос Пользователь теперь видит вопрос и может нажать на кнопку Ответы пользователя или время ожидания Назад к 1

ответил(а) 2012-11-14T15:35:00+04:00 7 лет назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема