如何在客户端访问服务器设置的对象

I'm using node with express and I want access object sent by server. For example

我正在使用带有express的节点,我想要服务器发送的访问对象。例如

server side:

router.get('/some_page/', (req, res) => {
    res.render('some_page', {
        data: {"somevar1":"somevalue", "somevar2":"somevalue2"}
    });
});

client side javascript:

客户端javascript:

var objSentFromSrv = ??? // here i want this object and then perform some action on it

Is this possible/legitimate?

这可能/合法吗?

EDIT:

I'm using handlebars as template engine.

我正在使用把手作为模板引擎。

Figured out somehow.

以某种方式想出来。

function middlewareAppendingLocals(req, res, next) {
    res.locals.layoutV = myValue;

    next();
}

router.post('/page/', middlewareAppendingLocals, (req, res) => {
    res.render('page_to_render');
});

In my case this variable is from database and I'm giving it based on id posted from antoher page. But still how can I access it from javascript, not only form .hbs layout file.

在我的情况下,这个变量来自数据库,我根据从antoher页面发布的id给出它。但是我怎样才能从javascript访问它,而不仅仅是形式.hbs布局文件。

Then page_to_render have and I can you handlebars {{}} to get it.

然后page_to_render有了,我可以让你把手{{}}来获取它。

4 个解决方案

#1

You need to encode the object as JSON like this:

您需要将对象编码为JSON,如下所示:

router.get('/some_page/', (req, res) => {
    res.send(JSON.stringify({
        data: {"somevar1":"somevalue", "somevar2":"somevalue2"}
    }));
});

and then use AJAX on the front-end, using jQuery you can use

然后在前端使用AJAX,使用你可以使用的jQuery

$.get('/some_page/', function(data) {
    var objSentFromSrv = JSON.parse(data);
});

or shorter:

$.getJSON('/some_page/', function(data) {
    var objSentFromSrv = data;
});

#2

Yes. This is possible and legitimate. Assuming you are using EJS, add a line like this to your template:

是。这是可能和合法的。假设您使用的是EJS,请在模板中添加如下所示的行:

<script>
    const objSentFromSrv = <%-JSON.stringify(data)%>;
</script>

If you're using a different templating engine, you'll just need to look up the specific syntax on how to serialize objects.

如果您使用的是不同的模板引擎,则只需要查找有关如何序列化对象的特定语法。

AjAX is overkill for this use-case.

AjAX对于这个用例来说太过分了。

#3

If you are using AngularJS as your front end service, you can create a controller and have it inject $scope and $http to get the data. For example:

如果您使用AngularJS作为前端服务,您可以创建一个控制器并让它注入$ scope和$ http来获取数据。例如:

var app = angular.module('myApp', []);

    app.controller('mainController', ($scope, $http) => {
    $scope.data= {};

    $scope.getData = function() {
        $http.get('/some_route/')
            .success((data) => {
                $scope.data = data;
                console.log(data);
            })
            .error((error) => {
                console.log(error);
            });
    };
});

And then in the front end, call getData().

然后在前端调用getData()。

https://docs.angularjs.org/guide/controller

#4

Your templating engine is going to take the arguments passed to that render call and produce HTML (often) or JSON. It's not really sending objects, just text data.

你的模板引擎将获取传递给该渲染调用的参数并生成HTML(通常)或JSON。它不是真正发送对象,只是发送文本数据。

If you're looking to change the state of some object that exists on the server side, you'll want to create some sort of API to do that. Send data down to the client, make changes to that data, then send it back to the server to be incorporated into the original object.

如果您希望更改服务器端存在的某个对象的状态,则需要创建某种API来执行此操作。将数据发送到客户端,对该数据进行更改,然后将其发送回服务器以合并到原始对象中。

#1