Прежде всего, я знаю, что этот вопрос есть везде на форумах, но, тем не менее, ни одно решение не помогло мне.Поэтому я постараюсь объяснить как можно больше.
Цель: Я пытаюсь создать игру, используя шаблон MVC и Javascript, чтобы главная страница не перезагружалась, спасибо.в XMLHttprequests.Когда вы попадаете на страницу игры, у вас появляется загадка 1, которая отображается и ждет вашего ввода.Затем с помощью некоторых стрелок я хочу перейти к загадке 2 или 3 или более или менее без перезагрузки страницы (потому что я хочу, чтобы фоновая музыка воспроизводилась повсюду).
Моя проблема: Я сделалнекоторые XHR-тесты: когда я нажимаю кнопку Update , все компоненты загружаются, и я в восторге.Затем я пробую кнопку Update2 .Ничего не произошло.Также я не хочу использовать JQuery (пусть будет чистый Javascript).
Что я уже пробовал: Я узнал о проблеме с кешем и попытался исправить ее с помощью некоторого случайного числа вURL, который я отправляю в XHRequest.Также поменял 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 ()не принял во внимание параметр (я забыл его), поэтому ничего не было получено.В следующий раз я буду более осторожен ...