使用 res.render get 后如何将数据发布到相同的 ejs 视图或部分？

Question

I need to display data that gets posted after rendering view with res.render() in get. When I use <% date %> my view throws an error saying that date is not defined and I know this happens because my value does not exist before rendering the view and its getting set after. So how do I set this variable to be displayed in my ejs file before or after my view gets rendered?

I have tried a few things like using res.send(), using another get() inside my post() and even creating a partial view but nothing works. I dont want to click any buttons to be able to do this and if its only possible with clicking well then. I know you cant use res.send() on the same view twice .

My post XMLHttpRequest is executed when the page loads in javascript to set my date variable and send it to my node.js file then I use express to fetch it. My node.js code is the following:

app.get('/', function (req, res) {

    res.render('index', {
        time: time,
        views: visitors,
        mobileViews: mobileVisitors,
    });
}

app.post('/', function(req, res){
    console.log('working');

    getInfo = req.body;

    console.log(getInfo);

    //getInfo.date = 1

    res.render('index', {dataTest: getInfo.date}); //this doesnt work

    //OR res.send({dataTest: getInfo.date}); doesnt work

    //OR app.get('/', function (req, res) {res.render ... doesnt work
}

My ejs view is:

<h1 class="test">test <%= dataTest %></h1>

My js file:

var waitForEl = function (selector, callback) {
    if (jQuery(selector).length) {
        callback();
    } else {
        setTimeout(function () {
            waitForEl(selector, callback);
        }, 100);
    }
};

waitForEl(".daterangepicker", function () {

    var element = document.querySelector('.ranges ul').childNodes[0].childNodes[0].data.toString();

    console.log(element);

    var date = 0;
    date = sendData(date, element);

    var obj = JSON.stringify({date: date});

    console.log(obj);

    var xhr = new XMLHttpRequest();

    xhr.open("POST", "http://localhost:4000", true);
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

    xhr.send(obj);
});

function sendData(date, element) {


    if(element == 'Today') {

        date = 1;
    }

    return date;
}

Answer 1

try this :

const bodyParser =require('body-parser');
const urlencodedParser = bodyParser.urlencoded({ extended: false });
app.get('/', function (req, res) {

    res.render('index', {
        time: time,
        Views: visitors,
        mobileViews: mobileVisitors,
    });
}

app.post('/',urlencodedParser,function(req, res){
    console.log('working');

    getInfo = req.body;

    console.log(getInfo);

    res.render('index', {getInfo: getInfo});

}

you need also a midlleware to handle post method in express app

npm i body-parser

it's better to use the object's key name as its value name to ease cycling through the properties

then in your ejs view use :

<%= getInfo.date %>

there is an = sign,don't forget it.

Answer 2

What I see is the first time you are trying to get "/" you don't have a getInfo.date

So make a getInfo.date = Date.now()

Or getInfo.date = new Date()

And pass it in into your initial get('/') call.

const bodyParser =require('body-parser'); const urlencodedParser = bodyParser.urlencoded({ extended: false }); app.get('/', function (req, res) { res.render('index', { time: time, Views: visitors, mobileViews: mobileVisitors, getinfo: getInfo}); } app.post('/',urlencodedParser,function(req, res){ console.log('working'); getInfo = req.body; console.log(getInfo); res.render('index', {getInfo: getInfo}); } const bodyParser =require('body-parser'); const urlencodedParser = bodyParser.urlencoded({ extended: false }); app.get('/', function (req, res) { res.render('index', { time: time, Views: visitors, mobileViews: mobileVisitors, getinfo: getInfo}); } app.post('/',urlencodedParser,function(req, res){ console.log('working'); getInfo = req.body; console.log(getInfo); res.render('index', {getInfo: getInfo}); } .

on the other hand you may also choose to make the getInfo.date = null or getInfo.date = ''

And check in your ejs with if condition if(getinfo.date){<=getinfo.date>}

Trying from mobile. Hope this solves