如何用Node.js在同一页面显示HTML格式的提交结果消息？

你的问题核心在于：直接用response.write("<h2>Applied successfully</h2>")会让浏览器只接收这个标题作为完整响应，而不是在你原来的页面中嵌入消息。下面给你两种实用的解决方案，按需选择：

方法一：用模板引擎渲染带消息的页面（页面刷新但不跳转） #

这种方法适合你希望提交后回到原页面，并在页面上显示消息的场景，需要配合Express的模板引擎（比如EJS、Pug）来实现：

1. 先确保你已经配置了模板引擎（以EJS为例）：

const express = require('express');
const app = express();
// 设置模板引擎为EJS
app.set('view engine', 'ejs');
// 配置静态文件目录（如果需要）
app.use(express.static('public'));
// 解析表单数据
app.use(express.urlencoded({ extended: true }));

2. 修改POST请求处理逻辑：
   注意要处理数据库查询的异步回调，确保操作完成后再渲染页面：

app.post("/sub", (request, response) => { 
  if (request.body.submit1) { 
    let sql1 = "insert query..."; 
    // 数据库查询是异步的，要在回调里处理响应
    connection.query(sql1, (err) => {
      if (err) {
        console.log("数据库操作出错:", err);
        // 渲染原页面并传递错误消息
        return response.render('home', { error: "提交失败，请重试" });
      }
      // 查询成功，渲染home页面并传递成功消息
      response.render('home', { success: "Applied successfully" });
    }); 
  } else { 
    console.log("无效请求"); 
    response.render('home', { error: "无效的请求参数" });
  } 
});

3. 在模板文件（views/home.ejs）中添加消息显示逻辑：
   在你原页面的合适位置插入这段代码，用来渲染消息：

<!-- 消息显示区域 -->
<% if (success) { %>
  <h2 style="color: green;"><%= success %></h2>
<% } %>
<% if (error) { %>
  <h2 style="color: red;"><%= error %></h2>
<% } %>

<!-- 你的原表单代码 -->
<form action="/sub" method="POST">
  <!-- 表单元素 -->
  <button type="submit" name="submit1">Submit</button>
</form>

方法二：用AJAX实现无刷新提交（页面完全不跳转） #

如果想要完全不刷新页面，直接在当前页面显示消息，推荐用AJAX提交表单：

1. 修改前端页面的表单和脚本：

<!-- 给表单加ID，方便JS获取 -->
<form id="applyForm">
  <!-- 你的表单元素 -->
  <button type="submit">Submit</button>
</form>
<!-- 用来显示消息的容器 -->
<div id="messageContainer"></div>

<script>
  const form = document.getElementById('applyForm');
  const messageContainer = document.getElementById('messageContainer');

  form.addEventListener('submit', async (e) => {
    // 阻止表单默认的跳转提交行为
    e.preventDefault();
    // 收集表单数据
    const formData = new FormData(form);
    // 加上submit1参数，对应后端的判断条件
    formData.append('submit1', true);

    try {
      // 发送POST请求
      const response = await fetch('/sub', {
        method: 'POST',
        body: formData
      });

      if (response.ok) {
        // 请求成功，显示成功消息
        messageContainer.innerHTML = '<h2 style="color: green;">Applied successfully</h2>';
        // 可以清空表单
        form.reset();
      } else {
        // 请求失败，显示错误消息
        messageContainer.innerHTML = '<h2 style="color: red;">提交失败，请重试</h2>';
      }
    } catch (err) {
      console.error("请求出错:", err);
      messageContainer.innerHTML = '<h2 style="color: red;">网络错误，请检查连接</h2>';
    }
  });
</script>

2. 修改后端的POST处理逻辑：
   不需要渲染页面，只需要返回状态和简单响应即可：

app.post("/sub", (request, response) => { 
  if (request.body.submit1) { 
    let sql1 = "insert query..."; 
    connection.query(sql1, (err) => {
      if (err) {
        console.log("数据库操作出错:", err);
        return response.status(500).send("Failed");
      }
      // 返回成功状态
      response.status(200).send("Success");
    }); 
  } else { 
    console.log("无效请求"); 
    response.status(400).send("Invalid");
  } 
});

两种方法各有优势：方法一简单易上手，适合不需要无刷新的场景；方法二用户体验更好，适合追求流畅交互的场景。记得根据你的实际需求选择哦！

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