通過onClick javascript函數使用PHP更新MySql數據庫

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>

//我在score.js文件中嘗試ajax

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從網頁更新數據庫非常常見。 我建議使用jQuery （JavaScript庫）簡化JavaScript開發。 這是一個很好的介紹jQuery和AJAX 在這里 。

基本上jQuery會做的就是為你編寫很多樣板代碼。 你最終寫的是這樣的：

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

...

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

你在這里做的是在答案正確時向updatescore.php發送POST請求。

然后，在您的updatescore.php中，您只需要擁有像您已經做過的PHP代碼，這將更新數據庫中的分數。

顯然你可以做比這更復雜的事情，但希望這足以讓你開始。

Answer 2

我注意到你有“window.location.reload（true）;” 在你的代碼中。 為什么？ 這似乎會讓事情變得不起作用。

您應該嘗試分析您的程序以找出問題發生的位置。 然后，您將能夠向我們提出一個非常具體的問題，例如“為什么Firefox在點擊此鏈接時不會觸發onClick處理程序”而不是僅發布三頁代碼。 當你粘貼這么多代碼時，我們很難找到你的bug。

所以這是你應該問的問題：

1. 我的HTML是否正確解析？ 對我來說，它看起來可能無法正確解析，因為你沒有在onClick的值周圍加上引號。 您應該使用引號，例如：onClick =“...”要查看您的HTML是否被很好地解析，您可以使用Firefox的View-> Source功能並查看它打印的顏色。

2. 我的onClick處理程序是否被調用？ 看起來你正在有效地使用alert（），所以這很好。

3. 請求是否實際發送到我的服務器？ 要確定這一點，您應該使用Firefox，並安裝Firebug擴展。 在“Net”面板中，它將顯示您的頁面所做的所有AJAX請求，它將顯示從服務器返回的結果。

4. 我服務器上的腳本是否做正確的事情？ 所以在服務器端，你現在可以添加像“echo'hello world';”這樣的行。 您將在Firebug Net面板中看到該輸出，它將幫助您調試服務器端腳本的行為。

5. 我的stateChanged函數被調用了嗎？ 再一次，使用alert（）語句，或寫入Firebug的調試控制台 。

一旦縮小了問題范圍，請嘗試將代碼減少到仍然失敗的最簡單代碼。 然后向我們展示代碼並告訴我們錯誤的症狀是什么。

另外，我推薦這本書： Javascript：The Reinitive Guide，第5版，由O'Reilly撰寫 。 它涵蓋了許多很酷的東西，如AJAX和閉包。 它的成本是50美元，但它肯定是一項很好的投資，因為它以更加連貫的方式解釋事物，然后你就可以從免費網站獲得。