onClick JavaScript関数を使用してPHPを使用してMySqlデータベースを更新する

Question

私は、子供向けの新しい単語を学習するためのWebゲームを作成しています。

私はデータベースから取り出された特定の単語とヒントを表示する4つのリンクを持っています。選択された単語がそのヒントの正しい単語と一致することを確認する必要があります。

私はonClick関数のためにjavascriptを使用する必要があり、選択した単語が正しい単語と一致するかどうかを確認できます。しかし、単語が正しく一致すればデータベースに保持されているスコアを更新する必要があるため、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ファイル

でアヤックスで私の試み

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を正しく学習することを強くお勧めします。年齢はかかりませんが、できることとできないことを理解するのに役立ちます。

WebページからAJAXを介してDBを更新することは非常に一般的です。 jQuery（JavaScriptライブラリ）を使用してJavaScriptの開発を簡略化することをお勧めします。 jQueryとAJAX hereの紹介があります。

基本的に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）;」というメッセージが表示されました。あなたのコードで。どうして？それは物事がうまくいかないように思える。

プログラムを分析して、問題の発生場所を調べるようにしてください。その後、3ページのコードを投稿するのではなく、「このリンクをクリックすると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's debug consoleに書き込んでください。

あなたはあなたの問題を絞り込むたら、まだ失敗できるだけ簡単なコードにコードを削減してみてください。その後、コードを表示して、エラーの症状を正確に教えてください。

もう1つ、この書籍を入手することをおすすめします。Javascript: The Deinitive Guide, 5th Edition by O'Reillyそれは、AJAXやクロージャのようなクールなものをたくさんカバーしています。それは$ 50の費用がかかるが、確かに良い投資だ。なぜなら、より一貫性のある方法で物事を説明してから、無料のウェブサイトから得ることができるからだ。