CODEWITHSUNDEEP
javascriptjqueryexpressserverclient
Igor OA
Igor OA

Reputation: 397

Send data to ExpressJS server to render new view

I'm facing difficulties understanding how to send data from the client side to an ExpressJS server, to render a view based on these data.

On the client side, the user is choosing different parameters, updating the 'data-preference' attribute (basically from 0 to 6) 

<div class="userChoice" data-preference="0">Category_1</div> 
<div class="userChoice" data-preference="0">Category_2</div>
.... Few more categories
<div class="userChoice" data-preference="0">Category_N</div>

I'm able to gather JSON data {Category: preference_value}.

However, I'm really lost (either client-side and server-side) when it comes to send these data to the ExpressJS server, and get a view based on that

What I tried client-side :

What I tried server-side :

A lot of questions on StackOverFlow are related to this topic but I'm unable to find any showing how to handle both sides. Any help or link would be very appreciated.

Upvotes: 0

Views: 696

Answers (1)

user7181162
user7181162

Reputation:

Server Side

If you are posting data to a NodeJS server using ExpressJS, you'll want to install the body-parser middleware. This will allow you to read posted values from req.body. So be sure to install this first and include it in your project.

var bodyParser = require('body-parser');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

Below the body-parser set-up, create an app.post endpoint to read the selected category and render a view based on the value.

//require path module to resolve html filepath
var path = require('path');

// ...

app.post('/category', function(req, res){

    var data = req.body; // { category: <preference_value> }

    var viewName;

    switch(data.category){
      case 0:
        viewName = "ViewOne.html";
        break;
      case 1:
        viewName = "ViewTwo.html";
        break;
      case 2:
        viewName = "ViewThree.html";
        break;
      default:
        break;
    }

    var viewPath = path.join(__dirname + "/views/" + viewName);

    res.sendFile(viewPath);

})

You will need to require the path module and use it to resolve the path to your HTML file. Also, be sure to place ViewOne.html, ViewTwo.html and ViewThree.html in the project_root/views directory so the path module can find it.

Client Side

To post the category data to your /category endpoint, you must JSON.stringify the category data and set contentType: "application/json" on the AJAX request:

$(document).ready(function(){

    var categoryData = JSON.stringify({category: 1});

    //this will render ViewTwo

    $.ajax({
      type: "POST",
      url: '/category',
      data: categoryData,
      success: function(html){
         $('body').html(html); // place the html wherever you like
      },
      error: function(err){ alert('error'); },
      contentType: "application/json"
    });
  })

If this AJAX request is successful it will return HTML for the view retrieved in the /category endpoint.

So try this. Hopefully it will get you started.

Upvotes: 1

Related Questions