CODEWITHSUNDEEP
javascriptnode.jsexpress
cha
cha

Reputation: 141

Send POST request from front-end javascript to back-end node.js

In the front-end script, I have a code like this to create the POST request to the server.

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/visitor/detect/1", true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify({
        value: "test"
    }));

Then here is my route in my server

router.post('/visitor/detect/1', (req, res) => {
      console.log(req.body);
      res.redirect('/visitor/login');
});

I'm expecting to redirect the page to /visitor/login after a successful post request, but it didn't. However, it is displaying the req.body.

What is the problem, and what way can I do to successfully send the post request from the front-end and redirect the page to the back-end?

Upvotes: 1

Views: 9248

Answers (1)

Simon Leroux
Simon Leroux

Reputation: 477

You cannot redirect with the ajax request the way you are trying to do it. Here is an snippet that does what I think you are trying to do. You might also look into the fetch api instead of using XMLHttpRequest.

On the server:

app.post("/visitor/detect/1", (req, res) => {
  console.log(req.body);
  res.json({ redirectRoute: "/visitor/login" });
});

Client side:

  var xhr = new XMLHttpRequest();
    xhr.open("POST", "/visitor/detect/1", true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify({
        value: "test"
    }));

    xhr.onreadystatechange = function() {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            var jsonResponse = JSON.parse(xhr.responseText)
            window.location.replace(jsonResponse.redirectRoute)
        }
    }

Upvotes: 3

Related Questions