如何实现点击同一按钮提交表单数据并执行fetch动态更新页面？

AI 小北

2026-7-24

解决动态刷新feed内容的问题

核心问题有两个：异步请求顺序不对和浏览器缓存旧文件，下面是具体修复方案：

1. 修改sendData函数，等待提交完成后再刷新feed

原来的fetch("shout.php")是异步操作，调用后立刻执行刷新逻辑时，PHP可能还没写完feed.html，导致拿到旧内容。改成异步函数，等待POST请求完成后再调用summonFeed：

async function sendData() {
  let data = new FormData(document.getElementById("tincan"));
  // 等待POST请求完成，确保PHP已更新feed.html
  await fetch("shout.php", {
    method: "POST",
    body: data,
  });
  // 刷新feed内容
  await summonFeed();
  return false;
}

2. 打破浏览器缓存，确保拉取最新的feed.html

浏览器会缓存静态文件（比如feed.html），即使服务器端文件已更新，fetch仍可能读取缓存内容。给请求URL加时间戳参数，让浏览器认为是新请求：

async function summonFeed() {
  // 加时间戳参数，避免缓存
  let file = `feed.html?t=${Date.now()}`;
  let summons = await fetch(file);
  let feed = await summons.text();
  document.getElementById("feed").innerHTML = feed;
}

可选优化：添加错误处理和用户体验提升

可以给POST请求加错误捕获，提交失败时提示用户，同时清空输入框：

async function sendData() {
  let data = new FormData(document.getElementById("tincan"));
  let textarea = document.getElementById("shoutAperture");
  try {
    const response = await fetch("shout.php", {
      method: "POST",
      body: data,
    });
    if (!response.ok) {
      throw new Error("提交失败，请重试");
    }
    await summonFeed();
    textarea.value = ""; // 清空输入框
  } catch (err) {
    alert(err.message);
  }
  return false;
}