发布请求后显示新的 html 页面？

Question

1. Summarize the problem

First I want to describe, how the project should work. I want to build my own little website with html, css, javascript (and expressJS and nodeJS). I´ve also watched a few tutorials about Rest-APIs and how they work. I want to create a login page , where you should enter a password to get to the "main- page". The problem is, that I´m working with a post-request atfer the user has clicked on a "submit" - button, where the value of a password box will be send to a server to check. After this was executed, I dont know how to show the new html page and how to redirect the user to a new page .

2. Describe what you´ve tried & 3. Show some code

I´ve tried two different things. Here is my beginning of the code in my server.js:

var app = express();
var server = app.listen(3000);

app.use(express.static('website'));

First I wanted to send a file after checking the password in my post request:

app.post('/all', function(req, res) {
    if(req.body.password != 'example') {
        return
    }
    res.sendFile('index.html');
});

I found this github issue, where a user has the same problem: https://github.com/expressjs/express/issues/692

But this method doesnt seem to work in a post-request. So I´ve tried another thing. I already knew, that sendFile() works in a get-request (as I mentioned in a github issue), so I´ve made this:

app.get('/all', function(req, res) {
    res.sendFile('index.html');
});

app.post('/register', function(req, res) {
    if(req.body.password != 'example') {
        return
    }

    res.redirect('/all')
});

For this code example I used the following stack overflow page: How to redirect to another page after serving a post request in Node.js? but it didnt work either.

3. Show some code:

Script in html doc:

    function XHTML_POST(path, parms, callback) {
        req = new XMLHttpRequest();
        var ret = false;
        callbackPOST = callback;

        req.open("POST", path, true);

        req.onload = function () {
            if (req.status != 200 && req.status != 1223 && req.status != 0 && req.status != 204) {
                if (req.status == 401) { }
                else { }
            }

            else {
                callbackPOST = callback;
            }
        }

        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
        req.setRequestHeader("Cache-Control", "no-cache");
        req.send(parms);
    }

    function postPass() {
        var pass = document.getElementById('pwBox').value; //id of passwordbox
        XHTML_POST('/register', 'password=' + pass, callback)
    }

    function callback() { }

</script>

After clicking on a submit button the postPass() function will be executed. Hopefully you understood my problem and what I´m trying to make. Thanks for reading it.

Answer 1

You can use the html forms:

HTML:

    <form method="POST">
        <input type="email" name="youremail" placeholder="Email Address" required>
        <input type="text" name="yourname" placeholder="Name" required>
        <input class="subscribe-button" type="submit" value="Subscribe">
      </form>

NodeJs Server:

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, 'login.html'))
})

app.post("/", (req, res) => {
  //Your Password Verification
  if(true){
    res.sendFile(path.join(__dirname, 'index.html'))
  }else{
    res.sendFile(path.join(__dirname, 'login.html'))
  }
})