我正在创建一个网络游戏,用于学习针对儿童的新单词。
我有一组四个链接,每个链接显示从我的数据库中检索到的特定单词和线索,我需要检查已选择的单词是否与该线索的正确单词匹配。
我知道我需要使用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);
?>
答案 0 :(得分:17)
我强烈建议您正确学习AJAX - 它不会花费您多少年龄,但会帮助您了解您可以做什么,不能做什么。
通过AJAX从网页更新数据库非常常见。我建议使用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代码,它将更新数据库中的分数。
显然你可以做比这更复杂的事情,但希望这足以让你开始。
答案 1 :(得分:0)
我注意到你有“window.location.reload(true);”在你的代码中。为什么?这似乎会让事情变得不起作用。
您应该尝试分析您的程序,以找出问题发生的位置。然后,您将能够向我们提出一个非常具体的问题,例如“为什么Firefox在点击此链接时不会触发onClick处理程序”而不是仅发布三页代码。当你粘贴这么多代码时,我们很难找到你的错误。
以下是您应该问的问题:
我的HTML是否正确解析?对我来说,它似乎无法正确解析,因为您没有在onClick的值周围加上引号。您应该使用引号,例如:onClick =“...”要查看您的HTML是否被很好地解析,您可以使用Firefox的View-&gt; Source功能并查看它打印的颜色。
我的onClick处理程序是否被调用?看起来你正在有效地使用alert(),这样做很好。
请求是否实际发送到我的服务器?要确定这一点,您应该使用Firefox,并安装Firebug扩展名。在“网络”面板中,它将显示您的页面所做的所有AJAX请求,它将显示从服务器返回的结果。
我服务器上的脚本是否做正确的事情?所以在服务器端,您现在可以添加“echo'hello world';”等行。您将在Firebug Net面板中看到该输出,它将帮助您调试服务器端脚本的行为。
我的stateChanged函数是否被调用?再次使用alert()语句,或写入Firebug's debug console。
在缩小问题范围后,请尝试将代码缩减为仍然失败的最简单的代码。然后向我们展示代码并告诉我们错误的症状是什么。
另一方面,我建议您阅读本书:Javascript: The Deinitive Guide, 5th Edition by O'Reilly。它涵盖了许多很酷的东西,如AJAX和闭包。它的成本是50美元,但它肯定是一项很好的投资,因为它可以用更加连贯的方式解释事情,然后你可以从免费网站获得。