JS如何通过Ajax传递数组值到跳转后的HTML页面并渲染

核心前提说明 #

你想通过if语句判断页面跳转完成再操作元素的思路无法实现，页面跳转后原页面（file1）的JS执行环境会被完全销毁，写在file1中的逻辑无法在跳转后的file2中运行。

方案1：纯静态页面无后端场景（推荐） #

无需使用Ajax，通过本地存储实现数据传递+跳转后操作元素，步骤如下：

第一步：修改file1代码 #

HTML部分

<form id='next' action='file2.html'>
    <button id="nextTwo" type="button" onclick="handleNext()">next2</button>
</form>

JS部分（保留原有check函数不变，新增跳转逻辑）

function handleNext() {
  // 先序列化需要传递的三个数组存入本地存储
  const transferData = {
    ants: ants,
    question: question,
    squestion: squestion
  }
  localStorage.setItem('quizData', JSON.stringify(transferData))
  // 存储完成后再执行跳转
  document.getElementById('next').submit()
}

第二步：新增file2页面的JS逻辑 #

将以下代码放在file2的</body>标签前，或绑定DOM加载完成事件，确保元素加载后再执行：

document.addEventListener('DOMContentLoaded', function() {
  // 读取file1存入的数组数据
  const quizData = JSON.parse(localStorage.getItem('quizData'))
  if (quizData) {
    // 此时file2的question元素已加载完成，不会出现null报错
    document.getElementById('question').innerHTML = quizData.question.join('<br>')
    // ants、squestion数组可直接使用
    console.log('答案数组：', quizData.ants)
    console.log('子问题数组：', quizData.squestion)
    // 可选：用完清除存储避免读取旧数据
    // localStorage.removeItem('quizData')
  }
})

方案2：Ajax传递方案（需要后端服务支持） #

如果必须用Ajax实现，需要后端提供数据存储、读取的接口，实现逻辑如下：

file1端代码 #

function handleNextWithAjax() {
  const transferData = {
    ants: ants,
    question: question,
    squestion: squestion
  }
  const xhr = new XMLHttpRequest()
  // 替换为你的后端存储接口地址
  xhr.open('POST', '/api/save-quiz-data', true)
  xhr.setRequestHeader('Content-Type', 'application/json')
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 数据存储成功后再跳转
      window.location.href = 'file2.html'
    }
  }
  xhr.send(JSON.stringify(transferData))
}

file2端代码 #

document.addEventListener('DOMContentLoaded', function() {
  const xhr = new XMLHttpRequest()
  // 替换为你的后端取数接口地址
  xhr.open('GET', '/api/get-quiz-data', true)
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const quizData = JSON.parse(xhr.responseText)
      document.getElementById('question').innerHTML = quizData.question.join('<br>')
    }
  }
  xhr.send()
})

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