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

Question

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

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

Я знаю, что мне нужно использовать javascript из-за функции onClick, и я могу успешно проверить, соответствует ли выбранное слово правильному слову. Тем не менее, мне нужно обновить счет, хранящийся в базе данных, если слово соответствует правильно, поэтому мне нужно будет использовать php.

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

Я пытался сделать это ... но это, вероятно, совершенно неправильно, так как я не мог заставить его работать должным образом:

//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 здесь .

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

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

...

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

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

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

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

Answer 2

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

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

Итак, вот вопросы, которые вы должны задать:

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

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

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

4. Правильно ли работает скрипт на моем сервере? Итак, на стороне сервера вы можете добавить строки типа "echo 'hello world';" и вы увидите этот вывод на панели Firebug Net, которая поможет вам отладить поведение вашего серверного скрипта.

5. Вызывается ли моя функция stateChanged? Еще раз, используйте операторы alert () или пишите в Консоль отладки Firebug .

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

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