CODEWITHSUNDEEP
jqueryhtmlnode.jsajaxexpress
jwlewis
jwlewis

Reputation: 21

NodeJS, Express Show HTML page response from AJAX POST

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?

Upvotes: 1

Views: 2746

Answers (1)

jwlewis
jwlewis

Reputation: 21

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!

Upvotes: 1

Related Questions