Express GET 请求未重新加载页面答案

【问题标题】：Express GET request not reloading pageExpress GET 请求未重新加载页面
【发布时间】：2022-01-25 09:36:26
【问题描述】：

我正在尝试使用 fetch 向客户端发送下一个 HTML 页面 (create.html) 作为对 GET 请求（由按钮触发）的响应。由于格式问题和潜在的未来缩放问题，我有意避免使用表单。代码记录了请求的发送、接收和响应，但它根本不会用它重新加载页面。 *res.redirect 也不起作用。我在下面附上了我的代码。 JavaScript：

app.get('/', function(req, res) {
    console.log(`[00]: Get request recieved at '/'`);
    res.sendFile('public/start.html' , { root : __dirname});
})

app.get('/login', function(req, res) {
    console.log(`[01]: Get request recieved at '/login'`);
    res.sendFile('public/login.html' , { root : __dirname});
})
app.get('/create', function(req, res) {
    console.log(`[02]: Get request recieved at '/create'`);
    res.sendFile('public/create.html' , { root : __dirname});
})

HTML：

<html>
    <head>
        <meta charset="utf-8">
        <title>HOME PAGE</title>
    </head>
    <body>
        <h1 id='title'>Welcome User!</h1>
        <h2>Select an option bellow!</h2>
        
        <button id="btnToLogin">Login</button>
        <button id="btnToCreate">Create Account</button>

        <p>-ADMIN PANEL-</p>
        <button id="btnDisplay">Display Database</button>
        <button id="btnTruncate">Truncate Database</button>
        <p id='displayText' >[displayText]: Nothing seems to be here...</p>
        
        <script src="start.js"></script> 
    </body>

</html>

HTML JavaScript：

// Gets elements from start.html
var btnToLogin = document.getElementById('btnToLogin');
var btnToCreate = document.getElementById('btnToCreate');
var btnDisplay = document.getElementById('btnDisplay');
var btnTruncate = document.getElementById('btnTruncate');
var displayText = document.getElementById('displayText');

btnToLogin.addEventListener('click', function() { fetch('/login', { method: 'GET' }) });
btnToCreate.addEventListener('click', function() { fetch('/create', { method: 'GET'}) });

我已经删除了大部分代码，对于我认为的问题来说是不必要的。一切都需要正确并设置服务器。如果它很重要，我已经附上了文件结构的图片。谢谢。 File Structure

【问题讨论】：

fetch 在后台接收数据，除非您手动碰巧将页面上的 HTML 替换为 fetch 收到的 HTML，否则您不会看到任何差异

标签： javascript html express get fetch

【解决方案1】：

Fetch 在后台执行并获取数据。 res.redirect 重定向请求。您正在通过 fetch 发送请求。不是地址栏。为此，您需要使用 location.href 而不是 fetch

btnToLogin.addEventListener('click', function() { location.href = '/login' });
btnToCreate.addEventListener('click', function() { location.href = '/create' });

【讨论】：