Javascript 在express/node中使用过账表单数据时出现问题

目前我拥有的是：

这是我的发帖方法

app.post('/barchartentry', function(req, res){
        res.render('barchart', { title: 'EZgraph: Bar Chart', barValues: req.body.myInputs, labelValues: req.body.myLabel});
    });

以下是我对Jade的看法：

extends layout

block appendHeader
    link(rel='stylesheet', href='stylesheets/barchart.css')

block content
    include navbar
    canvas(id='canvas' width="800" height="600")
    include copyright


block appendScripts
    script(src='js/barchart.js')

这是该视图中的JS文件，我需要访问我在该文件中发送的数据

$(document).ready(function() {

        var values = barValues;
        var labels = labelValues;

        console.dir(barValues);

        var canvas = document.getElementById("canvas").getContext("2d");

        canvas.fillStyle="#BFBFBF";
        canvas.fillRect(0,0,800,600);

        canvas.fillStyle="#000000";
        canvas.beginPath();

        canvas.moveTo(40, 40);
        canvas.lineTo(40, 560);
        canvas.lineTo(760, 560);
        canvas.stroke();
});

---

使用输入数据，我将用给定的数字/标签绘制一个条形图。目前我无法访问此数据，即使在将其提供给页面之后。我不确定我是否应该用它做些其他的事情，以使该脚本可以使用它？

尽管您正在将

barValues

和

labelValues

的值传递到您的Jade视图中，但您没有将它们的值呈现到HTML中，因此您的JS脚本无法引用它

在jade中，做一些类似的事情

script. 
    var values = barValues;
    var labels = labelValues;

---

我隐约记得在尝试将值替换为jade脚本时遇到问题。另外，动态生成javascript感觉有点难闻。因此，我将数据绑定到DOM并以编程方式访问它：

block content
  include navbar
  canvas(
  id='canvas',
  width="800",
  height="600",
  data-barValues=JSON.stringify(locals.barValues),
  data-labelValues=JSON.stringify(locals.labelValues)
  )
  include copyright

然后在js中：

$(document).ready(function() {
  var values = $('#canvas').attr('data-barValues').val();
  values = JSON.parse(values);
  var labels = $('#canvas').attr('data-labelValues').val();
  labels = JSON.parse(labels);
  ...
});

---

加载不带参数的页面，然后激发并返回AJAX请求以获取这些值，一旦AJAX完成，将它们分配给图表。哪里定义了

barValues

和

labelValues

？它们是来自另一个页面上表单的输入数据，这些数据通过第一个post方法发布。数据是存在的，而且至少有这么远，正如我使用console.dir看到的那样。我从来没有使用过AJAX，这对我来说是全新的，我正在努力学习。我在哪里可以找到你的建议呢？我怀疑是这样的，但我在网上找不到任何关于它的信息！谢谢你的帮助，我很感激。很好，这是一个更好的解决方案