JS循环点击CommandButton发送AJAX请求数据异常问题求助

问题场景 #

服务器限制单请求传输数据不超过25MB，但需上传数据超过80MB。已将数据拆分为符合大小的分片，通过JS循环点击<p:commandButton>触发AJAX请求分块发送，但仅第一个分片能正常传输；后续点击操作虽执行，但请求要等循环结束才发送，且所有后续请求都携带最后一个分片的内容。

现有代码 #

HTML（JSF） #

<h:form>
  <input type="text" id="dataInput" name="dataInput">
  <h:commandButton action="#{ImportController.getTransmittedData()}" id="button">
    <p:ajax execute="dataInput"></p:ajax>
  </h:commandButton>
</h:form>

JS代码 #

function startTransmittingData(){
  for(let i=0; i<chunks.length(); i++){
    document.getElementById("dataInput").value=chunks[i];
    document.getElementById("button").click();
  }
}

执行顺序示例 #

chunks=[0,1,2,3];

i=0 点击按钮，第一个分片传输到ImportController。 
i=1 执行按钮点击代码，但未调用ImportController。
i=2 执行按钮点击代码，但未调用ImportController。
i=3 执行按钮点击代码，但未调用ImportController。
退出循环
ImportController接收到带[3]的请求，共三次。

问题原因 #

1. 同步循环阻塞事件循环：浏览器JS线程为单线程，同步for循环会持续占用线程，导致AJAX请求的发送逻辑被推迟到循环结束后执行。
2. DOM状态复用：循环中快速修改dataInput值并触发点击，后续AJAX请求发送时，dataInput已被更新为最后一个分片的值，所有延迟发送的请求都会读取该最终值。

解决方案 #

方案1：异步循环触发请求 #

通过setTimeout将每次点击操作放入异步队列，给浏览器时间处理AJAX请求，确保每次操作时dataInput的值为当前分片：

function startTransmittingData() {
  chunks.forEach((chunk, index) => {
    setTimeout(() => {
      const input = document.getElementById("dataInput");
      const button = document.getElementById("button");
      input.value = chunk;
      button.click();
    }, index * 100); // 间隔100ms，可根据实际调整，避免请求过于密集
  });
}

方案2：直接使用PrimeFaces AJAX API发送请求 #

不依赖DOM元素状态，直接通过PrimeFaces的AJAX API传递分片数据，避免DOM值覆盖问题：

<!-- 先给form添加id -->
<h:form id="uploadForm">
  <input type="text" id="dataInput" name="dataInput">
  <h:commandButton action="#{ImportController.getTransmittedData()}" id="button">
    <p:ajax execute="dataInput"></p:ajax>
  </h:commandButton>
</h:form>

function startTransmittingData() {
  chunks.forEach(chunk => {
    PrimeFaces.ajax.AjaxRequest('/uploadForm', {
      formId: 'uploadForm',
      params: {
        'dataInput': chunk // 直接传递当前分片数据
      },
      // 可选：添加回调函数
      onsuccess: function(response) {
        console.log('分片上传成功');
      },
      onerror: function(response) {
        console.error('分片上传失败');
      }
    });
  });
}

额外建议 #

• 如果是文件上传场景，推荐直接使用PrimeFaces自带的<p:fileUpload>组件，它原生支持分块上传，无需手动实现。
• 后端ImportController需处理分片的接收和拼接逻辑，可给每个分片添加唯一标识（如分片序号、总片数），方便后续合并。

内容的提问来源于stack exchange，提问作者Rike M