如何在HTML的JavaScript中运行PHP文件？循环调用不跳转问题

我明白你的问题了——你想在循环里多次调用test.php，但不想让当前页面跳转，而且要让所有循环迭代都执行，对吧？原代码里用location.href的问题在于，浏览器会立刻跳转到新的URL，导致循环只跑了第一次就中断了，页面也被重定向了。下面给你几种可行的方案：

方案1：使用Fetch API（现代浏览器推荐） #

Fetch是现代浏览器原生支持的异步请求API，语法简洁，不会阻塞或跳转页面：

for (let i = 1; i < length; i++) {
  const bname = table.rows[i].cells[0].innerHTML;
  const bvalue = table.rows[i].cells[1].innerHTML;
  
  // 用URLSearchParams自动处理参数编码，避免特殊字符破坏URL
  const params = new URLSearchParams({
    account: account,
    key: key,
    memo: memo,
    bname: bname,
    bvalue: bvalue
  });
  
  fetch(`test.php?${params}`, { method: 'GET' })
    .then(response => {
      if (!response.ok) {
        throw new Error(`请求失败，状态码：${response.status}`);
      }
      console.log(`成功发送${bname}的请求`);
    })
    .catch(error => {
      console.error(`请求出错：${error.message}`);
    });
}

方案2：使用XMLHttpRequest（兼容老浏览器） #

如果需要支持IE这类老浏览器，可以用传统的XHR方式：

for (let i = 1; i < length; i++) {
  const bname = table.rows[i].cells[0].innerHTML;
  const bvalue = table.rows[i].cells[1].innerHTML;
  
  // 手动编码每个参数，防止特殊字符导致错误
  const encodedParams = `account=${encodeURIComponent(account)}&key=${encodeURIComponent(key)}&memo=${encodeURIComponent(memo)}&bname=${encodeURIComponent(bname)}&bvalue=${encodeURIComponent(bvalue)}`;
  
  const xhr = new XMLHttpRequest();
  xhr.open('GET', `test.php?${encodedParams}`, true);
  
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      console.log(`${bname}的请求已完成`);
    } else {
      console.error(`请求失败，状态码：${xhr.status}`);
    }
  };
  
  xhr.onerror = function() {
    console.error('网络请求出错');
  };
  
  xhr.send();
}

方案3：使用隐藏的Image元素（极简无响应处理场景） #

如果不需要处理test.php的响应结果，只是要触发它的执行，可以用更简单的方式——创建一个隐藏的img元素，浏览器会自动发起GET请求，无需显示或跳转：

for (let i = 1; i < length; i++) {
  const bname = table.rows[i].cells[0].innerHTML;
  const bvalue = table.rows[i].cells[1].innerHTML;
  
  const params = new URLSearchParams({
    account: account,
    key: key,
    memo: memo,
    bname: bname,
    bvalue: bvalue
  });
  
  const img = new Image();
  img.src = `test.php?${params}`;
  
  // 可选：监听请求状态
  img.onload = () => console.log(`${bname}的请求已发送`);
  img.onerror = () => console.error(`${bname}的请求发送失败`);
}

重要注意事项 #

• 参数编码必须做：不管用哪种方案，一定要对参数进行编码（encodeURIComponent或URLSearchParams），否则如果参数里有空格、&、=或中文等特殊字符，会导致URL解析错误，请求参数传递不正确。
• 避免并发请求过多：如果循环次数很多，浏览器可能会限制并发请求数量，导致部分请求失败。可以用async/await结合延迟来逐个发送请求：

async function sendRequestsSequentially() {
  for (let i = 1; i < length; i++) {
    const bname = table.rows[i].cells[0].innerHTML;
    const bvalue = table.rows[i].cells[1].innerHTML;
    
    const params = new URLSearchParams({
      account: account,
      key: key,
      memo: memo,
      bname: bname,
      bvalue: bvalue
    });
    
    try {
      const response = await fetch(`test.php?${params}`, { method: 'GET' });
      if (!response.ok) {
        throw new Error(`HTTP错误：${response.status}`);
      }
      console.log(`${bname}的请求完成`);
      // 每次请求后延迟100ms，避免请求过于密集
      await new Promise(resolve => setTimeout(resolve, 100));
    } catch (error) {
      console.error(`请求失败：${error.message}`);
    }
  }
}

// 调用函数启动请求
sendRequestsSequentially();

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