Обновление базы данных MySql с помощью PHP с помощью функции javascript onClick

Question

Я создаю веб-игру для изучения новых слов, направленных на детей.

У меня есть набор из четырех ссылок, каждый из которых отображает определенное слово, извлеченное из моей базы данных, и подсказку. Мне нужно проверить, что выбранное слово соответствует правильному слову для этой подсказки.

Я знаю, что мне нужно использовать 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); 
?> 

Answer 1

Я бы очень рекомендовал изучить AJAX правильно - это не займет у вас много времени, но поможет вам понять, что вы можете и чего не можете с этим сделать.

Обновление БД с веб-страницы через AJAX очень распространено. Я бы предложил упростить разработку JavaScript, используя jQuery (библиотека JavaScript). Существует хорошее введение в jQuery и AJAX here.

В принципе, что будет делать jQuery, напишите много шаблонов для вас. То, что вы будете в конечном итоге писать что-то вроде этого:

function updateScore(answer, correct) { 
    if (answer == correct) { 
    $.post('updatescore.php'); 
    } 
} 

... 

<a onclick="updateScore(this, correct)" ...> </a> 

Что вы здесь делаете посылает запрос POST к updatescore.php, когда ответ является правильным.

Затем, в вашем updatecore.php, вам просто нужен PHP-код, как вы уже делали, который обновит оценку в базе данных.

Вы, очевидно, можете сделать еще много сложнее, чем это, но, надеюсь, этого будет достаточно, чтобы вы начали.

Answer 2

Я заметил, что у вас есть "window.location.reload (true);" в вашем коде. Зачем? Похоже, что это не поможет.

Вы должны попытаться проанализировать свою программу, чтобы узнать, где эта проблема. Тогда вы сможете задать нам очень конкретный вопрос, например: «Почему Firefox не запускает обработчик onClick, когда я нажимаю на эту ссылку», а не просто отправляю три страницы кода. Когда вы вставляете столько кода, нам довольно сложно найти вашу ошибку.

Так вот вопросы вы должны спросить:

1. ли мой HTML разбираемый правильно? Мне кажется, что он не может быть правильно проанализирован, потому что вы не ставили кавычки вокруг значения onClick. Вы должны использовать кавычки, например: onClick = "..." Чтобы узнать, хорошо ли вы разбираетесь в вашем HTML, вы можете использовать функцию «Просмотр»> «Источник» Firefox и посмотреть на цвета, которые он печатает.

2. Подключен ли мой обработчик onClick? Похоже, вы эффективно используете alert(), так что это хорошо.

3. Действительно ли запрос отправляется на мой сервер? Чтобы определить это, вы должны использовать Firefox и установить расширение Firebug. На панели «Сеть» он отобразит все запросы AJAX, которые создаются вашей страницей, и отобразит результаты, которые были возвращены с сервера.

4. Является ли скрипт на моем сервере правильным? Итак, на стороне сервера вы можете добавить строки, такие как «echo» hello world »; и вы увидите этот вывод на панели Firebug Net, который поможет вам отладить поведение сценария на стороне сервера.

5. Является ли функция stateChanged вызываемой? Снова используйте операторы alert() или напишите Firebug's debug console.

После того, как вы сузили проблему вниз, попробуйте уменьшить свой код в простейшими кода, который до сих пор не удается. Затем покажите нам код и точно скажите, какие симптомы ошибки.

В другом примечании, я рекомендую получить эту книгу: Javascript: The Deinitive Guide, 5th Edition by O'Reilly. Он охватывает множество интересных вещей, таких как AJAX и закрытие. Это стоит 50 долларов, но это, безусловно, хорошая инвестиция, потому что она объясняет вещи гораздо более последовательным образом, чем вы когда-либо получаете от бесплатных сайтов.