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

【问题标题】：How to post data to the same ejs view or partial after using res.render get?使用 res.render get 后如何将数据发布到相同的 ejs 视图或部分？
【发布时间】：2020-02-12 17:08:50
【问题描述】：

我需要显示在 get 中使用 res.render() 渲染视图后发布的数据。当我使用时，我的视图会抛出一个错误，指出日期未定义，我知道会发生这种情况，因为在渲染视图之前我的值不存在，并且在之后设置它。那么如何设置此变量以显示在我的 ejs 文件中在我的视图渲染之前或之后？

我尝试了一些方法，例如使用 res.send()，在我的 post() 中使用另一个 get()，甚至创建了一个局部视图，但没有任何效果。 我不想点击任何按钮来做到这一点，如果它只有点击好的话。我知道你不能在同一个视图上使用 res.send() 两次。

当页面在 javascript 中加载以设置我的日期变量并将其发送到我的 node.js 文件时，我的 post XMLHttpRequest 被执行，然后我使用 express 来获取它。我的 node.js 代码如下：

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
}

我的 ejs 视图是：

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

我的js文件：

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;
}

【问题讨论】：

让我直截了当地说，您正在使用向app.post("/", handler) 发送post 请求的Ajax 请求，并且您希望使用刚刚提交的数据呈现索引模板？
@goto1 是的，我正在使用 Ajax 发布请求将我的日期变量发送到 app.post("/", handler) 并使用 req.body 获取值。我需要在渲染我的视图之前或之后在我的视图中看到该值（getInfo.date），如果可能的话，无需单击
这在您当前的方法中是不可能的。如果您想使用您使用Ajax 提交的一些数据来呈现index 模板，您需要将此信息保存在会话和/或数据库中。

标签： javascript node.js express xmlhttprequest ejs

【解决方案1】：

试试这个：

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});

}

您还需要一个中间件来处理 express 应用中的 post 方法

npm i body-parser

最好使用对象的键名作为其值名，以简化属性循环

然后在您的 ejs 视图中使用：

<%= getInfo.date %>

有一个=符号，别忘了。

【讨论】：

【解决方案2】：

我看到的是你第一次尝试获取“/”你没有getInfo.date

所以创建一个getInfo.date = Date.now()

或getInfo.date = new Date()

并将其传递到您的初始 get('/') 调用中。

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}); }.

另一方面，您也可以选择制作getInfo.date = null 或getInfo.date = ''

并使用 if 条件 if(getinfo.date){<=getinfo.date>} 签入您的 ejs

尝试使用移动设备。希望这能解决

【讨论】：