NodeJS, Express Show HTML page response from AJAX POST

Question

Using NodeJS with Express server, when you go to http://localhost:(Serverport), the NodeJS server responds with sending an HTML file using the following code:

app.get('/', function(req, res){
    res.sendFile(__dirname + '/login.html');
});

Now I am using a JQuery AJAX POST to send info to the server and based on the servers response send the user to either HTML page "/index" or if user credentials aren't good, HTML page "/loginno". The problem is AJAX isn't playing nice with the server response of sendfile like in the server get function response.

I am getting the file from the server and it prints out the complete HTML in the console, but I just don't know how to make the browser actually go to the page the same way it does with a server GET response.

This is my Ajax function that works and gets the HTML page object from the server, but the browser just doesn't navigate to the page.

$.ajax({
        type: "POST",
        url: '/index', //A string containing the URL to which the request is sent.
        timeout: 2000,

        //A plain object or string that is sent to the server with the request.
        data: userdata,

        //The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).
        dataType: 'html',

        success: function(response,status,xhr) {
            //show content
            console.log('Success!' + response+', Status: '+status+', xhr: '+xhr)
        },
        error: function(jqXHR, textStatus, err) {
            //show error message
            alert('text status '+textStatus+', err '+err)
        }
    });

So the question is, how do you tell a JQuery AJAX POST function to navigate to an HTML page object sent from an NodeJS server response?

You would need a route in express to respond to the POST. If you have one already, include it with your question. Example: `app.post('/index', function(req, res) { /* send html page */ });` — ThisClark, Oct 01 '17 at 08:42
Is your question how to programmatically make the browser open another page? `window.location.href = ` will do; see eg. https://stackoverflow.com/questions/18634383/window-location-href-and-window-open-in-javascript — imhotap, Oct 01 '17 at 08:46
ThisClark, I already have the route. In my question I stated that the server is sending the html file. Everything is good there. Just didn't know how to have the client navigate to the html file that the server was sending. Thanks though. — jwlewis, Oct 01 '17 at 08:53
imhotap, basically that was the gist of the question but the server is sending an html file exactly like it does in a get reponse. I will look at the question you recommend. — jwlewis, Oct 01 '17 at 08:54

jwlewis · Answer 1 · 2017-10-01T09:12:45.273

After looking at the answer given in this question... Calling Response.redirect through Ajax

I was able to do what I needed by building a json response with a url variable and inside the ajax post success, test if server is saying its ok to go to the new page and navigate there using window.location.href.

In my NodeJS server route...

app.post('/index', function(req, res) { 
    //Do some req verification stuff here

    //If req verfiication passes
    var servResp = {};
    servResp.success = true;
    servResp.redirect = true;
    servResp.redirectURL = "http://localhost:3000/index";
    res.send(servResp);  
});

and my AJAX Post function...

$.ajax({
    type: "POST",
    url: '/index', //A string containing the URL to which the request is sent.
    timeout: 2000,

    //A plain object or string that is sent to the server with the request.
    data: userdata,

    //The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).
    dataType: 'json',

    success: function(response,status,xhr) {
        //show content
        console.log('Success!' + response+', Status: '+status+', xhr: '+xhr)

            if(response.redirect) {
                window.location = response.redirectURL;
            }

    },
    error: function(jqXHR, textStatus, err) {
        //show error message
        alert('text status '+textStatus+', err '+err)
    }
});

Thanks to everyone that helped!

NodeJS, Express Show HTML page response from AJAX POST

1 Answers1