如何从render express方法使用javascript获取客户端数据? [英] How to get a data on the client side with javascript from the render express method?

问题描述

我曾经使用过MVC javascript框架(例如Backbone或Angular)，我想充分利用express，但有些事情我不知道该怎么做.

I use to work with MVC javascript framework such as Backbone or Angular, i would like to fully use express and there is something i don't know how to do.

当我使用javascript客户端框架时，我进行了AJAX GET调用，以使用 res.send()从express获取实体，但是仅通过express呈现引擎，如何获取发送的实体与 res.render('index'，{用户:{名称:'bob'}}))在您的JavaScript代码的客户端?

When i used javascript client framework, i made AJAX GET calls to get my entities from express with res.send(), but only with the express rendering engine, how to get the entity you send with res.render('index', { User: { name: 'bob' }}) on the client side in your javascript code?

我在客户端尝试直接致电:

I tried on the client side to directly call:

<script>
console.log(JSON.stringify(User));
</script>

但是我得到一个未捕获的ReferenceError:用户未定义

但是，我可以使用 ejs 访问html中的对象:

However, i can access the object in my html using ejs:

<h1><%= User.name %></h1>

我知道如何使用 ejs视图引擎在html中获取它，但是如何直接从javascrit获取它?

I know how to get it in the html using the ejs view engine, but how to get it directly from the javascrit ?

推荐答案

很久以后回答了这个问题，但是我遇到了这个问题，不得不花了相当长的时间才知道，我想与以后的访问者分享这个问题.

Answering this much later, but I ran across this issue and had to work with it for quite a while before I got it, thought I would share for future visitors of this question.

就像之前的V31一样， res.render 呈现模板时无需先在JavaScript中传递数据.只要您的EJS模板实际上是EJS模板，变量<％= User.name％> 都只引用其服务器端定义-一旦将其呈现为这页纸.正如Express文档所说， render 返回视图的渲染HTML".换句话说，说 console.log(User.name)客户端正在尝试访问仅存在于服务器中的对象.

Like V31 said earlier, res.render renders the template without passing the data first in JavaScript. The variables like <%= User.name %> only refer to their server-side definition as long as your EJS template is actually an EJS template -- which it stops being once it's been rendered as the page. As the Express docs say, render "returns the rendered HTML of a view." In other words, saying console.log(User.name) client-side is trying to access an object that only exists in the server.

您可以这样解决:

<script>
    console.log('<%= JSON.stringify(User) %>');
</script>

在<％= JSON.stringify(User)％> 周围加上引号，因为此结果将是字符串而不是变量-您不希望您的 console.log 将整个字符串化的用户数据视为一个变量，您只想记录它.

With the quotes required around the <%= JSON.stringify(User) %> because this result will be a string rather than a variable -- you don't want your console.log treating the entire stringified user data as a variable, you just want to log it.

进一步讲这个概念，这就是使客户端JavaScript文件也可以访问要传递到渲染中的变量的方式.例如，假设您有一个 document.onLoad 函数，该函数需要服务器中的变量来决定是否进行特定的DOM操作.

Taking this concept further, this is how one would make variables you're passing into your render accessible to client-side JavaScript files as well. For example, say you have a document.onLoad function that requires a variable from the server to decide whether or not to make a particular DOM manipulation.

<script>
   const bob = '<%= User.name %>';
   const alice = '<%= User.bestfriend %>';
</script>
<script src='/javascripts/myscript.js'></script>

myscript.js 现在可以访问在服务器的 User <中定义的 User.name 和 User.bestfriend /code>对象，并可以按照您认为合适的任何方式使用该数据客户端.

myscript.js now has access to User.name and User.bestfriend as they were defined in the server's User object, and can use that data client-side in whatever manner you see fit.

这篇关于如何从render express方法使用javascript获取客户端数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！