Question

我完全迷失了;我正在使用NodeJS来获取JSON，我需要将变量传递给我的页面并让JavaScript使用数据。

app.get('/test', function(req, res) {
    res.render('testPage', {
        myVar: 'My Data'
    });

这是我的Express代码（非常简单，用于测试目的）;现在使用EJS我想收集这些我知道要在页面上呈现的数据只是

<%= myVar %>

但是我需要能够在JavaScript中收集这些数据（如果可能的话，在.js文件中），但现在只是在我尝试过的Alert框中显示变量

在Jade中，它就像alert('!{myVar}')或!{JSON.stringify(myVar)}。我可以在EJS中做类似的事吗？我不需要<input type=hidden>之类的任何字段，并在javascript中获取字段的值。如果有人可以帮助我们非常感激

Answer 1

您可以使用此（客户端）：

<script>
  var myVar = <%- JSON.stringify(myVar) %>;
</script>

您还可以让EJS呈现.js文件：

app.get('/test.js', function(req, res) {
  res.set('Content-Type', 'application/javascript');
  res.render('testPage', { myVar : ... });
});

但是，模板文件（testPage）仍然需要.html扩展名，否则EJS将无法找到它（除非你告诉Express否则）。

正如@ksloan在评论中指出的那样：你必须要小心myVar包含的内容。如果它包含用户生成的内容，则可能会使您的站点处于打开状态以进行脚本注入攻击。

防止这种情况发生的可能解决方案：

<script>
  function htmlDecode(input){
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
  }
  var myVar = JSON.parse(htmlDecode("<%= JSON.stringify(myVar) %>"));
</script>

Answer 2

这里的主要困难是如果myVar包含引号，则可以避免XSS风险，例如</script>。为了避免这个问题，我建议在JSON.stringify之后使用 Base64 编码。这样可以避免与引号或HTML标记相关的所有风险，因为Base64只包含＆＃34; safe＆＃34;要放在带引号的字符串中的字符。

我建议的解决方案：

EJS文件：

<script>
  var myVar = <%- passValue(myVar) %>
</script>

将呈现类似的东西（例如，这里myVar = null）：

<script>
  var myVar = JSON.parse(Base64.decode("bnVsbA=="))
</script>

服务器端NodeJS：

function passValue(value) {
  return 'JSON.parse(Base64.decode("' + new Buffer(JSON.stringify(value)).toString('base64') + '"))'
}

客户端JS（这是与Unicode一起使用的Base64解码的实现，如果您愿意，可以使用另一个，但如果它支持Unicode则要小心）：

var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}

Answer 3

试试这个：

<script type="text/javascript">
     window.addEventListener('load', function(){
         alert('<%= myVar %>');
     });
</script>

Answer 4

如果你有像数组这样的更复杂的对象，你可以这样做：

<% if (myVar) { %>
   <script>
      myVar = JSON.parse('<%- JSON.stringify(myVar) %>');
   </script>
<% } %>

否则，您见过的先前解决方案将无效

Answer 5

在这里我是如何工作的，在节点js中像这样传递json

let j =[];
//sample json
j.push({data:"hi});

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

现在在js函数中

var json = JSON.parse('<%- JSON.stringify(json) %>');

这对我来说很好

Answer 6

根据文档here：

转到Latest Release，下载./ejs.js或./ejs.min.js。

在您的网页上添加其中一个，ejs.render(str)。

Answer 7

我有类似的问题。我得到了价值

var inJavascript = JSON.parse("<%= myVar %>");

将变量传递给ExpressJS中的JavaScript

7 个答案: