如何在HTML中获取表单POST请求的响应并展示？

默认表单提交会直接刷新页面并展示后端返回的JSON内容，要在原页面显示响应消息，需要用JavaScript拦截表单提交行为，通过异步请求发送数据，再把响应消息渲染到页面上。

步骤1：修改HTML，添加消息显示区域 #

在表单下方新增一个用来展示响应消息的元素：

<form id="registerForm" action="/register" method='POST'>
    <div>
        <label for="username">username:</label>
        <input type="text" name='username' placeholder='username'/>
    </div>
    <div>
        <label for="email">email:</label>
        <input type="text" name='email' placeholder='email'/>
    </div>
    <div>
        <label for="password">password:</label>
        <input type="password" name='password' placeholder='password'/>
    </div>
    
    <input type='submit' value="Submit" />
</form>
<!-- 新增消息展示区域 -->
<div id="responseMessage" style="margin-top:15px; color:red;"></div>

（顺便把密码输入框改成type="password"，符合安全规范）

步骤2：添加JavaScript处理异步提交 #

在HTML底部（或单独的JS文件中）加入以下代码：

const form = document.getElementById('registerForm');
const messageDiv = document.getElementById('responseMessage');

form.addEventListener('submit', async (e) => {
    // 阻止表单默认的页面跳转行为
    e.preventDefault();
    
    // 收集表单数据并转为JSON格式
    const formData = new FormData(form);
    const data = Object.fromEntries(formData);
    
    try {
        const response = await fetch('/register', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data),
        });
        
        const result = await response.json();
        
        // 根据响应状态设置消息颜色：成功用绿色，失败用红色
        messageDiv.style.color = response.ok ? 'green' : 'red';
        // 把后端返回的消息显示到页面上
        messageDiv.textContent = result.message;
    } catch (error) {
        messageDiv.style.color = 'red';
        messageDiv.textContent = '请求失败，请稍后重试';
    }
});

核心逻辑说明 #

• e.preventDefault()：拦截表单默认的跳转刷新行为，让我们能自主控制提交流程
• Fetch API：异步发送POST请求，全程不会刷新页面
• 解析后端返回的JSON数据，将message字段内容渲染到页面的消息区域
• 通过response.ok判断请求是否成功，给不同状态的消息设置不同颜色，提升用户感知

后端代码无需修改 #

你现有的Node.js后端逻辑完全可用，返回的JSON格式能直接被前端解析使用。

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