Node.js原生HTTP服务POST请求后更新HTML页面异常问题

问题根源 #

1. 用AJAX发送POST请求时，服务端返回的HTML仅作为响应数据存在，浏览器不会自动替换当前页面内容
2. 调用location.reload()会触发新的GET请求，若服务端未保存状态，会返回初始页面，导致更新内容一闪而过

服务端实现（维护状态+动态返回HTML） #

const http = require('http');

// 全局状态标记：记录是否触发过POST请求
let isClicked = false;

const server = http.createServer((req, res) => {
  res.setHeader('Content-Type', 'text/html; charset=utf-8');

  if (req.method === 'POST') {
    // 更新状态
    isClicked = true;
    // 返回更新后的页面内容
    res.end(`<!DOCTYPE html>
<html>
  <head><title>Updated Page</title></head>
  <body>
    <h1>Clicked</h1>
    <p>Clicked</p>
    <button id="clickBtn">Click Again</button>
    <script>
      document.getElementById('clickBtn').addEventListener('click', async () => {
        const resp = await fetch('/', { method: 'POST' });
        const html = await resp.text();
        document.documentElement.innerHTML = html;
      });
    </script>
  </body>
</html>`);
  } else if (req.method === 'GET') {
    // 根据状态返回对应页面
    if (isClicked) {
      res.end(`<!DOCTYPE html>
<html>
  <head><title>Updated Page</title></head>
  <body>
    <h1>Clicked</h1>
    <p>Clicked</p>
    <button id="clickBtn">Click Again</button>
    <script>
      document.getElementById('clickBtn').addEventListener('click', async () => {
        const resp = await fetch('/', { method: 'POST' });
        const html = await resp.text();
        document.documentElement.innerHTML = html;
      });
    </script>
  </body>
</html>`);
    } else {
      // 初始页面
      res.end(`<!DOCTYPE html>
<html>
  <head><title>Initial Page</title></head>
  <body>
    <h1>Not Clicked Yet</h1>
    <p>Click the button to update</p>
    <button id="clickBtn">Click Me</button>
    <script>
      document.getElementById('clickBtn').addEventListener('click', async () => {
        const resp = await fetch('/', { method: 'POST' });
        const html = await resp.text();
        document.documentElement.innerHTML = html;
      });
    </script>
  </body>
</html>`);
    }
  }
});

server.listen(3000, () => console.log('Server running at http://localhost:3000'));

核心改进点 #

• 服务端：通过全局变量isClicked维护状态，GET请求根据状态返回初始或更新后的HTML；POST请求更新状态并返回更新后的页面内容
• 客户端：发送POST请求后，直接从响应中获取更新后的HTML，替换当前页面的根元素内容，避免刷新页面导致状态丢失

简化版（单次请求完成更新） #

如果不需要刷新页面后保留更新状态，可以简化逻辑：POST请求直接返回更新后的HTML，客户端拿到后直接替换DOM，无需服务端维护GET请求的状态分支：

// 客户端按钮点击事件修改为
document.getElementById('clickBtn').addEventListener('click', async () => {
  const resp = await fetch('/', { method: 'POST' });
  const html = await resp.text();
  document.documentElement.innerHTML = html;
});

服务端只需在POST请求中返回目标更新HTML即可，GET请求始终返回初始页面。

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