提交后如何将数据从快递传递给脚本标记？

我有一个名为“historicos.ejs”的视图。 在第一次加载时，页面只有2个dateselect器进行范围查询，提交button和图表（谷歌图表）为空白。 我需要进行查询，并在第二次渲染后（按下提交后）将数据传递到图表中。

这是放置在我的视图头部的脚本标记

<script type="text/javascript"> // his with query data from the server var histo = his; console.log(histo) google.load('visualization', '1', {packages: ['corechart']}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('datetime', 'X'); data.addColumn('number', 'Temperatura (C)'); data.addRows(); var options = { width: 550, height: 363, title: 'Comportamiento de la Temperatura', hAxis: { title: 'Tiempo desde ' }, vAxis: { title: 'Temperatura' }, backgroundColor: '#f1f8e9' }; var chart = new google.visualization.LineChart(document.getElementById('tem_line')); chart.draw(data, options); } </script> 

第二行的console.log()命令显示一个空数组，或者在浏览器控制台中未定义。

这是“historicos.ejs”控制器

 app.get('/historicos', function(req, res) { res.render("historicos.ejs") }); app.post('/historicos/buscar', function(req, res) { //...some query.... query return "his" variable with the data res.render("historicos.ejs", { his:JSON.stringity(his) }) }); 

注：我testing了我的代码没有stringify，并显示在ejs <% %>的视图，它完美的作品。

当我按提交button时，脚本中的console.log即使数据具有string化数据也不会显示任何内容。

注2：我尝试res.json(JSON.stringify(his) ，它完美的作品，它显示在浏览器中的所有数据从MongoDB。

所以我的问题是，我能做些什么来传递variables到我的脚本来绘制数据到图表？

Answer 1

一个简单的解决scheme是将json包装在types为application / json的脚本标签中。 这将阻止脚本实际运行，并允许您使用DOM来查询文本内容并对其进行parsing。

 <script id="histo-data" type="application/json"> <%= his %> </script> <script type="text/javascript"> var data = document.getElementById('histo-data').textContent.trim() if(data){ var histo = JSON.parse(data); console.log(histo) google.load('visualization', '1', {packages: ['corechart']}) // ... 

下面是一个快速演示，展示了一些静态JSON的工作原理： http : //jsfiddle.net/grnp8n9n/