Я создаю веб-игру для изучения новых слов, направленных на детей.
У меня есть набор из четырех ссылок, каждый из которых отображает определенное слово, извлеченное из моей базы данных, и подсказку. Мне нужно проверить, что выбранное слово соответствует правильному слову для этой подсказки.
Я знаю, что мне нужно использовать javascript из-за функции onClick, и я могу успешно проверить, соответствует ли выбранное слово правильному слову. Тем не менее, мне нужно обновить оценку, содержащуюся в базе данных, если слово правильно сопоставлено, поэтому мне нужно будет использовать php.
Из того, что я могу собрать, это означает, что я должен использовать AJAX, но я не могу найти хороший пример того, кто использует AJAX onClick ссылки для обновления базы данных.
Я попытался сделать это … но, вероятно, совершенно неправильно, поскольку я не мог заставить его работать правильно:
//This is my link that I need to use in my game.php file where $newarray[0] is that answer I want to check against $newarray[$rand_keys] <a onClick=originalUpdateScore('$newarray[0]','$newarray[$rand_keys]')>$newarray[0]</a> // моя попытка ajax в файле score.js
var xmlHttp; function originalUpdateScore(obj,corr){ xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Browser does not support HTTP Request"); return; } if(corr == obj){ var url="getscore.php"; //url=url+"?q="+str; //url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; //xmlHttp.open("GET",url,true); xmlHttp.open(url,true); xmlHttp.send(null); alert('Correct'); } else { alert('AHHHHH!!!'); } window.location.reload(true);
}
function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } } function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { //Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp;
}
//attempting to update the database in a getscore.php file <?php //$q=$_GET["q"]; include("dbstuff.inc"); $con = mysqli_connect($host, $user, $passwd, $dbname) or die ("Query died: connection"); $sql= "UPDATE `temp` SET `tempScore`= `tempScore`+1 WHERE (temp.Username='$_SESSION[logname]')"; $showsql = "SELECT `tempScore` FROM `temp` WHERE (temp.Username='$_SESSION[logname]')"; $result = mysqli_query($con, $showsql); echo "$result"; mysqli_close($con); ?>в//attempting to update the database in a getscore.php file <?php //$q=$_GET["q"]; include("dbstuff.inc"); $con = mysqli_connect($host, $user, $passwd, $dbname) or die ("Query died: connection"); $sql= "UPDATE `temp` SET `tempScore`= `tempScore`+1 WHERE (temp.Username='$_SESSION[logname]')"; $showsql = "SELECT `tempScore` FROM `temp` WHERE (temp.Username='$_SESSION[logname]')"; $result = mysqli_query($con, $showsql); echo "$result"; mysqli_close($con); ?>
Я бы очень рекомендовал правильно изучить AJAX – это не займет у вас возрастов, но поможет вам понять, что вы можете и чего не можете с этим поделать.
Обновление БД с веб-страницы через AJAX очень распространено. Я бы предложил упростить вашу разработку JavaScript, используя jQuery (библиотека JavaScript). Здесь есть хорошее введение в jQuery и AJAX.
В основном, что будет делать jQuery, напишите много шаблонов для вас. То, что вы в конечном итоге напишите, выглядит примерно так:
function updateScore(answer, correct) { if (answer == correct) { $.post('updatescore.php'); } } ... <a onclick="updateScore(this, correct)" ...> </a>
То, что вы делаете здесь, отправляет запрос POST на updatecore.php, когда ответ правильный.
Затем в вашем файле updatecore.php вам просто нужен PHP-код, как вы уже делали, который обновит счет в базе данных.
Вы, очевидно, можете сделать гораздо больше осложнений, чем это, но, надеюсь, этого будет достаточно, чтобы вы начали.
Я заметил, что у вас есть «window.location.reload (true)»; в вашем коде. Зачем? Похоже, что это не поможет.
Вы должны попытаться проанализировать свою программу, чтобы узнать, где эта проблема. Тогда вы сможете задать нам очень конкретный вопрос, например: «Почему Firefox не запускает обработчик onClick, когда я нажимаю на эту ссылку», а не просто отправляю три страницы кода. Когда вы вставляете столько кода, нам довольно сложно найти вашу ошибку.
Итак, вот вопросы, которые вы должны задать:
Правильно ли обработан мой HTML-код? Для меня это похоже на то, что он не может быть правильно проанализирован, потому что вы не ставили кавычки вокруг значения onClick. Вы должны использовать кавычки, например: onClick = "…" Чтобы узнать, хорошо ли вы разбираетесь в вашем HTML, вы можете использовать функцию «Просмотр»> «Источник» Firefox и посмотреть на цвета, которые он печатает.
Вызывается ли мой обработчик onClick? Похоже, вы эффективно используете alert (), так что это хорошо.
Действительно ли запрос отправляется на мой сервер? Чтобы определить это, вы должны использовать Firefox и установить расширение Firebug . На панели «Сеть» он отобразит все запросы AJAX, которые создаются вашей страницей, и отобразит результаты, которые были возвращены с сервера.
Является ли скрипт на моем сервере правильным? Итак, на стороне сервера вы можете добавить строки, такие как «echo» hello world »; и вы увидите этот вывод на панели Firebug Net, который поможет вам отладить поведение сценария на стороне сервера.
Вызывается ли моя функция stateChanged? Еще раз используйте инструкции alert () или напишите в консоли отладки Firebug .
Как только вы сузили проблему, попробуйте уменьшить код до простейшего возможного кода, который все еще не работает. Затем покажите нам код и точно скажите, какие симптомы ошибки.
В другой заметке я рекомендую получить эту книгу: Javascript: The Deinitive Guide, 5th Edition от O'Reilly . Он охватывает множество интересных вещей, таких как AJAX и закрытие. Это стоит 50 долларов, но это, безусловно, хорошая инвестиция, потому что это объясняет вещи гораздо более последовательным образом, чем вы когда-либо получаете от бесплатных сайтов.