如何用Node.js强制刷新页面？Wordle类游戏增量模式跳转问题

我们正在为学校项目开发一款类Wordle游戏，实现了增量模式：用户从3字母单词关卡开始，通关后进入4字母关卡，以此类推。但从3字母关卡切换到4字母关卡时遇到问题：前端通过Ajax请求调用服务器的res.render渲染新页面，但页面始终停留在“胜利”页面，没有刷新。请问如何强制刷新当前页面，或者渲染带有递增后单词长度参数的同页面？

前端按键事件代码 #

$("input").on("keydown", function (event) {
      if (event.key == 'Enter' && this.checkValidity()) {
      let mot_entre = this.value;
      entrerUnMot(mot_entre);
      this.value = '';

      if (mot_entre == app.mot) {
          $("input").remove();
          $("#victory").text("Bravo, vous avez gagné!");
          if (<%= id_joueur %> != 0) {
          sauvegarderScore("<%= mode %>", <%= nb_lettres %>, <%= id_joueur %>);
          }
          app.partie_gagnee = true;
          if ("<%= mode %>" == "incremental" && parseInt(<%= nb_lettres %>) < INCREMENTAL_LETTRES_MAX) {
          incrementerPartie(<%= nb_lettres %>, <%= id_joueur %>);
          }
      }
      }
  });

Ajax请求代码 #

function incrementerPartie(nb_lettres, id_joueur) {
      $.ajax({
      type: 'POST',
      url: '/jouer/incrementalNextGame',
      data: {nb_lettres: nb_lettres, id_joueur: id_joueur},
      success: function() {
      },
      error: function() {
          alert("impossible de lancer la partie suivante du mode incrémental");
      }
      });
  }

后端路由代码 #

router.use('/incrementalNextGame', (req, res, next) => {
res.render('jouer.ejs', {mode: "incremental", nb_lettres: parseInt(req.body.nb_lettres) + 1, id_joueur: req.body.id_joueur});});

方案1：页面重定向（简单直接） #

问题核心是Ajax请求只会获取服务器返回的渲染结果，但不会自动替换当前页面。可以让后端返回重定向指令，前端触发页面跳转：

1. 修改后端路由，把res.render换成res.redirect，跳转到带参数的游戏页面：

router.post('/incrementalNextGame', (req, res) => {
  const nextLetterCount = parseInt(req.body.nb_lettres) + 1;
  res.redirect(`/jouer?mode=incremental&nb_lettres=${nextLetterCount}&id_joueur=${req.body.id_joueur}`);
});

注意：把router.use改成router.post，匹配前端的POST请求，避免方法不兼容问题。

2. 修改前端Ajax的success回调，触发页面跳转：

function incrementerPartie(nb_lettres, id_joueur) {
  $.ajax({
    type: 'POST',
    url: '/jouer/incrementalNextGame',
    data: {nb_lettres: nb_lettres, id_joueur: id_joueur},
    success: function() {
      window.location.href = `/jouer?mode=incremental&nb_lettres=${parseInt(nb_lettres)+1}&id_joueur=${id_joueur}`;
    },
    error: function() {
      alert("impossible de lancer la partie suivante du mode incrémental");
    }
  });
}

更简洁的方式：直接去掉Ajax，在胜利逻辑里直接跳转

// 替换原来的incrementerPartie调用
window.location.href = `/jouer?mode=incremental&nb_lettres=${parseInt(<%= nb_lettres %>)+1}&id_joueur=${<%= id_joueur %>}`;

方案2：局部刷新页面内容（无跳转体验） #

如果不想刷新整个页面，可以让后端返回渲染好的HTML，前端替换当前页面的内容：

1. 修改后端路由，返回渲染后的HTML字符串：

router.post('/incrementalNextGame', (req, res) => {
  const nextLetterCount = parseInt(req.body.nb_lettres) + 1;
  res.render('jouer.ejs', {
    mode: "incremental",
    nb_lettres: nextLetterCount,
    id_joueur: req.body.id_joueur
  }, (err, html) => {
    if (err) {
      res.status(500).send("Erreur lors du chargement de la partie");
      return;
    }
    res.send(html);
  });
});

2. 修改前端Ajax的success回调，替换页面内容并重新初始化游戏：

function incrementerPartie(nb_lettres, id_joueur) {
  $.ajax({
    type: 'POST',
    url: '/jouer/incrementalNextGame',
    data: {nb_lettres: nb_lettres, id_joueur: id_joueur},
    success: function(html) {
      // 替换整个页面内容
      document.body.innerHTML = html;
      // 重新初始化游戏变量和事件（比如app对象、按键监听）
      initGame(); // 假设你有游戏初始化函数
    },
    error: function() {
      alert("impossible de lancer la partie suivante du mode incrémental");
    }
  });
}

额外优化：把前端按键事件改成事件委托，避免替换DOM后事件失效

// 替换原有的$("input").on("keydown", ...)
$(document).on("keydown", "input", function(event) {
  // 原有的按键逻辑
});

内容的提问来源于stack exchange，提问作者Lucas Martin