JSP页面自动刷新保留输入内容时定时器异常问题求助

首先，你的代码出现极速刷新的核心原因是：每次通过window.location.href跳转页面后，整个JSP页面会重新加载，而新页面加载完成后，$(document).ready里的refreshPage()又会立刻执行，再次触发页面跳转——相当于无限循环跳转，定时器的2秒延迟根本没机会生效。

另外你的代码还有两个小问题需要先修正：

• 选择器错误：$("positionInput")是直接找标签名为<positionInput>的元素，显然不对，应该根据你的表单元素的class或ID来写，比如如果是class为positionInput的输入框，要写成$(".positionInput")；
• URL参数拼接错误：多个参数时你会重复添加?，导致URL变成xxx.jsp?name1=val1?name2=val2，正确的应该是第一个参数用?，后续用&连接。

下面给你两种可行的解决思路：

思路1：修复页面跳转式刷新，保留表单内容 #

这种方法基于你原本的思路，但需要解决循环跳转的问题，同时用JSP直接填充URL参数（比JS更可靠）：

步骤1：JSP页面初始化时填充表单值 #

在你的waitingplayer.jsp里，给每个输入框直接从请求参数中取值，比如：

<input type="text" name="username" class="positionInput" value="${param.username}">
<input type="text" name="roomId" class="positionInput" value="${param.roomId}">

这样页面刷新后，输入框会自动填充URL里带的参数值，不需要JS再去解析URL。

步骤2：修正JavaScript代码 #

$(document).ready(function () { 
  function refreshPage(){
    var parameters = [];
    // 修正选择器，这里假设你的输入框有class="positionInput"
    $(".positionInput").each(function() {
      var name = $(this).attr("name");
      var value = $(this).val();
      if(value.trim() !== ""){
        // 把参数转成key=value的格式，后续用&拼接，同时编码避免特殊字符问题
        parameters.push(`${encodeURIComponent(name)}=${encodeURIComponent(value)}`);
      }
    });
    var url = "http://localhost:8080/drawinguess/waitingplayer.jsp";
    if(parameters.length > 0){
      url += "?" + parameters.join("&");
    }
    // 跳转到新URL
    window.location.href = url;
  }

  // 关键！页面加载完成后，先延迟2秒再执行刷新，而不是立刻执行
  setTimeout(refreshPage, 2000);
});

这里的核心改动是：页面加载后不立刻执行refreshPage，而是先等2秒再触发，这样新页面有足够的时间加载并填充表单，不会出现刚加载就跳转的循环。

思路2：用AJAX异步刷新（推荐） #

页面整页跳转体验不好，而且容易出问题，更优的方案是只刷新页面需要更新的部分（比如等待玩家的列表区域），表单内容完全保留，不需要URL传参：

步骤1：在JSP中划分需要刷新的区域 #

比如把需要实时更新的内容放在一个容器里：

<!-- 表单部分，不会被刷新 -->
<form>
  <input type="text" name="username" class="positionInput">
  <input type="text" name="roomId" class="positionInput">
</form>

<!-- 需要刷新的区域 -->
<div id="playerListContainer">
  <%-- 这里放等待玩家的内容，比如从后台获取的列表 --%>
</div>

步骤2：用AJAX定时刷新容器内容 #

$(document).ready(function () { 
  function refreshPlayerList(){
    // 用AJAX请求后台获取最新的玩家列表
    $.ajax({
      url: "http://localhost:8080/drawinguess/getPlayerList", // 后台接口地址
      type: "GET",
      data: {
        // 这里可以把表单参数传给后台，比如：
        username: $(".positionInput[name='username']").val(),
        roomId: $(".positionInput[name='roomId']").val()
      },
      success: function(data){
        // 把返回的HTML替换到容器里
        $("#playerListContainer").html(data);
      },
      complete: function(){
        // 请求完成后，再延迟2秒触发下一次刷新
        setTimeout(refreshPlayerList, 2000);
      }
    });
  }

  // 启动刷新
  refreshPlayerList();
});

这种方法的优势是：

• 表单内容完全保留，不需要任何传参操作；
• 只有局部区域刷新，页面不会闪烁，体验更好；
• 不会出现整页跳转导致的循环刷新问题。

内容的提问来源于stack exchange，提问作者Antoine Bon