Fetch请求后页面没更新，是哪里写错了吗？

Good“雨婷提问于 2026-03-18 22:15:24 阅读 4

前端

我用 Fetch 发了个 POST 请求提交表单，控制台能看到请求成功了，但页面内容没变，难道 fetch 不会自动刷新页面吗？

我试过在 then 里加 location.reload()，但感觉不太对，应该有更好的做法吧？

<form id="myForm">
  <input type="text" name="title" value="测试文章" />
  <button type="submit">提交</button>
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    await fetch('/api/posts', { method: 'POST', body: new FormData(e.target) });
    // 这里该怎么做才能更新页面？
  });
</script>

Ajax请求

我来解答赞 4 收藏

反馈

1 条解答

东方思涵 Lv1

你理解对了，fetch 确实不会自动刷新页面，它只是负责发请求和收响应，页面更新得你自己来。

你的请求成功后，后台数据是改了，但前端 DOM 还是旧的样子。你需要在 fetch 完成后重新渲染页面。

最简单的做法是把数据重新取一遍：

document.getElementById('myForm').addEventListener('submit', async (e) => {

  e.preventDefault();

  

  // 先提交表单

  await fetch('/api/posts', { method: 'POST', body: new FormData(e.target) });

  

  // 然后重新获取列表数据并渲染

  const response = await fetch('/api/posts');

  const posts = await response.json();

  

  // 这里替换成你实际渲染列表的逻辑

  renderPosts(posts);

});



function renderPosts(posts) {

  const container = document.getElementById('postsContainer');

  container.innerHTML = posts.map(post => ${post.title}).join('');

}

如果你只是想在当前页面显示提交成功的信息，也可以简单粗暴一点：

document.getElementById('myForm').addEventListener('submit', async (e) => {

  e.preventDefault();

  

  await fetch('/api/posts', { method: 'POST', body: new FormData(e.target) });

  

  // 直接操作 DOM 显示成功提示，或者更新某个元素

  document.getElementById('message').textContent = '提交成功！';

  document.getElementById('myForm').reset();

});

至于你用的 location.reload()，确实太粗暴了，相当于刷新整个页面，体验不好，除非你真的需要重新加载整个页面的数据。

核心就一句话：fetch 成功后，该查数据查数据，该改 DOM 改 DOM，别指望它会自动帮你渲染。

2026-03-18 22:18