我希望HTML页面在NODE应用程序中的POST请求后更新为新内容，而不使用：其他模块如Express等形成新的路线
新增内容为：
<!DOCTYPE html>
<html>
<head>
<title>Updated Page</title>
</head>
<body>
<h1>Clicked</h1>
<p>Clicked</p>
</body>
</html>完整代码如下：
const http = require('http');
// create a server to handle requests
const server = http.createServer((req, res) => {
// handle POST requests
if (req.method === 'POST') {
let body = '';
req.on('data', (chunk) => {
console.log('Received data:', chunk);
body += chunk;
});
req.on('end', () => {
console.log('Received complete data:', body);
// send an updated HTML response to the client
const responseHtml = `<!DOCTYPE html>
<html>
<head>
<title>Updated Page</title>
</head>
<body>
<h1>Clicked</h1>
<p>Clicked</p>
</body>
</html>`;
// send a success response to the client
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(responseHtml);
});
} else {
// send an HTML page to the client that allows them to paste images and videos
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(`<!DOCTYPE html>
<html>
<head>
<title>Blue Div</title>
<style>
#blue-div {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="blue-div" onclick="sendPostRequest()"></div>
<script>
function sendPostRequest() {
const data = {};
fetch('/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => {
if (response.ok) {
console.log('POST request successful');
} else {
console.error('POST request failed');
}
})
.catch(error => {
console.error('Error sending POST request:', error);
});
}
</script>
</body>
</html>
`);
}
});
// start the server
server.listen(8080);
console.log('Server running at http://localhost:8080/');在DevTools的网络选项卡中，我得到正确的响应response
但HTML页面保持不变。
我试着用location.reload();如果响应正常，但它只是将页面重新加载到初始状态，同时“请求”本身消失，我可以看到出现毫秒
1条答案
按热度按时间rxztt3cl1#
这里的问题是，客户端不知道如何处理新页面。使用fetch不会触发重载，例如，从表单提交的post。当您手动重载时，服务器会用原始页面响应。
没有多个路由的解决方案是只将新的
<body>作为字符串获取，然后在客户端使用body的innerHTML = <the new html from fetch>MDN documentation和一些示例可以在这里找到。
第一页的代码应该如下所示：
我个人建议你使用一个模板引擎，或者至少把HTML保存在一个专用文件中，把它们放在服务器代码中很快就会变得混乱。