Question

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

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

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

注意：我在没有stringify的情况下测试了我的代码，并在ejs <% %>的视图中显示了它，并且它运行良好。

当我按下提交按钮时，即使数据包含stringify数据，脚本中的console.log也不会显示任何内容。

注意2：我尝试res.json(JSON.stringify(his)并且效果很好，它在浏览器中显示来自mongodb的所有数据。

所以我的问题是，如何将变量传递到我的脚本中以将数据绘制到图表中呢？

Answer 1

一个简单的解决方案是将json包装在类型为application / json的脚本标记中。这将阻止脚本实际运行，并允许您使用DOM查询文本内容并解析它。

<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/

提交后如何将数据从express传递到脚本标签？

1 个答案: