tictactoe与php/ajax不断失败

Question

我是一年级的学生，所以我对此很陌生。对于我们的课程，我们必须通过使用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）？我们预计它将运行add.php与ajax并更新董事会与一个新的价值填补，并且代码将检查赢家，游戏结束，如果一个框已经填写。谢谢！

Answer 1

首先，我强烈建议你使用浏览器的控制台，否则你会感到痛苦和流泪。按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的方式。

var box0 = ; 
var box1 = X; 
var box2 = ; 
var box3 = O; 
var box4 = O; 
var box5 = ; 
var box6 = X; 
var box7 = X; 
var box8 = ; 

注意失踪报价：，你可能会看到这样的事情可能是有趣的，直接看生成的JS文件（通过其粘贴网址到浏览器地址栏）。当你尝试生成源代码时，这就是问题：10次以上的9次你有引号问题。不太容易出错的解决方案是通过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。只是在说。

至于你的其他代码，我不会破坏你在美妙的开发世界中的dicoveries，但让我们说，有确实简单的方法来做到这一点。一些提示：

• 所有这些if/else测试可以被重构为for循环。
• 这9个变量box0 ... box8可能在一个数组中。
• 你可能不需要这两个阵列painted和content。
• 您也可以考虑一个二维数组（3阵列，每个阵列3个的值）...

祝你好运;）