Question

首先，我知道这个问题在论坛上无处不在，但仍然没有解决方案适合我。所以我会尽力解释。

目标：我正在尝试使用MVC模式并使用Javascript创建游戏，这要感谢XMLHttprequests来使主页面不被重新加载。当您到达游戏页面时，将显示一个谜语1，并等待您的输入。然后，我想用一些箭头转到2或3或更多或更少的谜语，而无需重新加载页面（因为我希望始终播放背景音乐）。

我的问题：我进行了一些XHR测试：单击 Update 按钮时，所有组件都在加载，我感到敬畏。然后，尝试使用 Update2 按钮。什么都没发生。另外，我也不想使用JQuery（请使用纯Javascript）。

我已经尝试过的方法：我了解了缓存问题，并尝试使用XHRequest中发送的url中的一些随机数来纠正它。还将 let 更改为 var ，反之亦然，但没有任何效果（我是新来的，我还不知道一个或另一个的影响）。我将生成的XHR对象隔离到一个函数中。

我的文件出了问题（由于冗余，我没有写很多组件）：

主模板：

[...]
<body>
    <!-- THOSE BUTTONS ARE TESTS FOR XMLHttprequests -->
    <button onclick="UpdateAllComponents(1)">Update</button> <!-- riddle 1 -->
    <button onclick="UpdateAllComponents(2)">Update2</button> <!-- riddle 2 -->

    <!-- Number of the riddle displayed -->
    <span id="numberRiddle"></span>

    <!-- Go back to the previous riddle -->
    <span id="previousRiddle"></span>

    <!-- Go to the next riddle -->
    <span id="nextRiddle"></span>

    <!-- Description riddle and answer form -->
    <span id="answerForm"></span>

    <!-- Message saying if the answer entered is the good one or not -->
    <span id="validationRiddle"></span>

    <!-- Tip that appears after a moment -->
    <span id="tip"></span>

    <script src="public/js/updatePlayComponents.js"></script>

</body>

我的JS文件

"use strict"

function createXHRequest() {
    let xhr = new XMLHttpRequest();
    return xhr;
}

function UpdateComponentNumberRiddle(numberRiddle) {
    let xhr = createXHRequest();

    xhr.open("GET", "index.php?action=play&numberRiddle="+numberRiddle+"&rand="+Math.floor(Math.random()*100), true);

    xhr.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("numberRiddle").innerHTML = this.responseText;
      }
    };

    xhr.send();   
}

            [...] ALMOST THE SAME KIND OF FUNCTION FOR EVERY COMPONENT [...]

function UpdateComponentAnswerForm(idRiddle) {
    let xhr = createXHRequest();

    xhr.open("GET", "index.php?action=play&answerForm="+idRiddle+"&rand="+Math.floor(Math.random()*100), true);

    xhr.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
    document.getElementById("answerForm").innerHTML = this.responseText;
      }
    };

    xhr.send();   
}

function UpdateAllComponents(numberRiddle)
{
    UpdateComponentNumberRiddle(numberRiddle);
    UpdateComponentPreviousRiddle(numberRiddle);
    UpdateComponentNextRiddle(numberRiddle);
    UpdateComponentAnswerForm(numberRiddle);
    UpdateComponentValidationRiddle(numberRiddle);
    UpdateComponentTip(numberRiddle);
}

我不知道它是否有用，但这是我的路由器：

    else if($_GET['action'] == "play")
            {                    
                // COMPONENTS
                if(isset($_GET['numberRiddle'])) 
                {
                    GetNumberRiddle($team, $_GET['numberRiddle']);
                }
                [...] NOT WRITING EVERYTHING [...]
                else if(isset($_GET['answerForm'])) 
                {
                    GetAnswerForm($team, $_GET['answerForm']);
                }
                else Play($team);
            }
    [...]

并完成一个我的组件控制器示例：

function GetNumberRiddle($team, $idRiddle)
{
    $gamestate = new Game($team->getIdTeam());
    $totalRiddles = $gamestate->GetTotalRiddles();
    $riddle = $gamestate->GetRiddleInfos($idRiddle);

    require('src/view/components/play/numberRiddle.php');
}

与关联的视图：

<span>
Vous etes a l'enigme <?php echo $riddle[4] . "/" . $totalRiddles;?>
</span>

感谢您抽出宝贵的时间来了解什么不起作用以及如何解决。了解我是一个全新的人：Javascript，MVC，OOP。我真的不知道为什么我决定以这种方式（一定要学习）来做，但是一切正常，直到我决定在其中添加一些XHR。

我为此感到很高兴，而且我真的花了好几个小时来寻找问题的答案。有人可以帮我吗？

对于像我这样从不睡觉的人来说晚安，而对其他人来说早安

**编辑：** 现在它可以工作了，因为在我的模型中，函数GetRiddleInfos（）没有考虑参数（我忘了它），因此什么也没得到。下次我会更加小心...

XMLHttpRequest函数Javascript一次运行

0 个答案: