我是一年级学生，所以我对此很陌生。对于我们的课程，我们必须使用Ajax和PHP进行SQL交互的tictactoe游戏。我们使用客户端tictactoe，以javascript为例。但是现在我们陷入了最后一段代码。基本上我们做的是做一个SQL查询来检索框的值，并将所有这些分配给javascript变量，如下所示：
var box0 = <?=$box1?>;
var box1 = <?=$box2?>;
var box2 = <?=$box3?>;
var box3 = <?=$box4?>;
var box4 = <?=$box5?>;
var box5 = <?=$box6?>;
var box6 = <?=$box7?>;
var box7 = <?=$box8?>;
var box8 = <?=$box9?>;
之后我们编写了一个长javascript代码作为我们可以想到的最后一个选项，使两个数组跟踪值（以确定谁获胜）以及是否填充空格（以防止更改已填充的块） ）。 javascript看起来像这样： `
//Global Variables
var painted;
var content;
var winningCombinations;
//Instanciate Arrays
window.onload = function() {
painted = new Array();
content = new Array();
winningCombinations = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
if (box0 == " ") {
painted[0] = "false";
content[0] = "";
} else {
painted[0] = "true";
content[0] = box0;
}
if (box1 == " ") {
painted[1] = "false";
content[1] = "";
} else {
painted[1] = "true";
content[1] = box1;
}
if (box2 == " ") {
painted[2] = "false";
content[2] = "";
} else {
painted[2] = "true";
content[2] = box2;
}
if (box3 == " ") {
painted[3] = "false";
content[3] = "";
} else {
painted[3] = "true";
content[3] = box3;
}
if (box4 == " ") {
painted[4] = "false";
content[4] = "";
} else {
painted[4] = "true";
content[4] = box4;
}
if (box5 == " ") {
painted[5] = "false";
content[5] = "";
} else {
painted[5] = "true";
content[5] = box5;
}
if (box6 == " ") {
painted[6] = "false";
content[6] = "";
} else {
painted[6] = "true";
content[6] = box6;
}
if (box7 == " ") {
painted[7] = "false";
content[7] = "";
} else {
painted[7] = "true";
content[7] = box7;
}
if (box8 == " ") {
painted[8] = "false";
content[8] = "";
} else {
painted[8] = "true";
content[8] = box8;
}
}`
所以这应该使两个数组包含我们想要检查的数据。但是当我们尝试运行以下代码时，由onclick-handler激活，根本没有任何反应;
//Game methods
function boxClicked(boxid) {
if (painted[boxid - 1] == "false") {
if (turn % 2 == 0) {
content[boxid - 1] = "X";
$.ajax({
type: "POST",
url: "add.php",
data: {
id: boxid,
weapon: "X"
}
});
} else {
content[boxid - 1] = "O";
$.ajax({
type: "POST",
url: "add.php",
data: {
id: boxid,
weapon: "O"
}
});
}
$.ajax({
type: "POST",
url: "count.php",
});
painted[boxid - 1] = "true";
checkForWinners(content[boxid - 1]);
squaresFilled++;
if (squaresFilled == 11) {
alert("THE GAME IS OVER!");
}
location.reload(true);
} else {
alert("THAT SPACE IS ALREADY FILLED");
}
}
function checkForWinners(symbol) {
for (var a = 0; a < winningCombinations.length; a++) {
if (content[winningCombinations[a][0]] == symbol && content[winningCombinations[a][1]] == symbol && content[winningCombinations[a][2]] == symbol) {
alert(symbol + " WON!");
if (symbol == "X") {
$.ajax({
type: "POST",
url: "score.php",
data: {
player: "X"
}
});
}
if (symbol == "O") {
$.ajax({
type: "POST",
url: "/score.php",
data: {
player: "O"
}
});
}
playAgain();
}
}
}
function playAgain() {
y = confirm("PLAY AGAIN?");
if (y == true) {
$.ajax({
type: "POST",
url: ".resetcount.php",
});
$.ajax({
type: "POST",
url: "delete.php",
success: function() {
location.reload(true);
}
});
} else {
alert("Thanks for playing!");
}
}
所以基本上，任何人都可以通过运行boxClicked（boxid）来告诉我们为什么我们都没有得到任何回复？我们期望它用ajax运行add.php并用新值填充更新板，并且代码将检查获胜者，游戏结束以及是否已经填写了一个框。谢谢！
答案 0 :(得分：0)
首先，我强烈建议您使用浏览器的控制台，否则您将走上一条充满痛苦和泪水的道路。按F12或Ctrl+Shift+I打开浏览器的控制台。
您可以通过调用console.log()从脚本中记录消息。记录每个Ajax请求可能是一个好主意，方法是将done处理程序传递给每个$.ajax调用：
$.ajax({
type: "POST",
url: "add.php",
data: {
id: boxid,
weapon: "X"
}
}).done(function (data, textStatus, jqXHR) {
console.log("add.php", data, textStatus, jqXHR);
});
...或者通过注册全局ajaxSuccess处理程序：
$.ajaxSuccess(function (event, jqXHR, ajaxOptions, data) {
console.log(ajaxOptions.url, data, textStatus, jqXHR);
});
现在有将数据从PHP传递到JS的方式。直接查看生成的JS文件（通过将其URL粘贴到浏览器URL栏中）可能会很有趣，您可能会看到类似这样的内容：
var box0 = ;
var box1 = X;
var box2 = ;
var box3 = O;
var box4 = O;
var box5 = ;
var box6 = X;
var box7 = X;
var box8 = ;
请注意缺少的引号。当您尝试生成源代码时，这就是问题：超过10次时，您会遇到引号问题。一个不易出错的解决方案是通过Ajax以通用数据交换格式传递数据，例如JSON，XML或纯文本。
现在，通过添加缺少的引号来修复PHP：
var box0 = "<?=$box1?>";
var box1 = "<?=$box2?>";
var box2 = "<?=$box3?>";
var box3 = "<?=$box4?>";
var box4 = "<?=$box5?>";
var box5 = "<?=$box6?>";
var box6 = "<?=$box7?>";
var box7 = "<?=$box8?>";
var box8 = "<?=$box9?>";
然后，您可能还想在点击处理程序中添加console.log。只是说。
至于你的其余代码，我不会在精彩的开发世界中破坏你的爱情，但我们只是说，肯定有更简单的方法可以做到。一些提示：
if/else测试都可以重构为for循环。box0 ... box8可以在数组中。painted和content。