javascript - 在 jade 中用 nodejs 发送处理变量

Question

我有一个发送矩阵的脚本，类似于 [[1,2,3,4], [7,6,5,4], [2,3,4,5]]。当我使用 res.send(JSON.stringify(dataArray)); 发送它并使用 h1#results 在 jade 中显示它时，我确实看到格式是正确的。

但是我想在谷歌图表中使用这些数据。我的直觉会告诉我们像这样呈现数据:data.addRows = results;。然而事实并非如此，因为 jade 不明白我指的是变量 send。

我怀疑我不明白 Jade 背后的一些基本原理。我知道大部分 jade/html 是固定的，只有“脚本”标签内的代码得到执行，但据我所知，谷歌的 function drawChart() {) 内的所有代码都在脚本标签内.

编辑

我的新 ajax 脚本:

    $(function() {
$('#search').on('keyup', function(e){
    if(e.keyCode === 13) {
        var parameters = { search: $(this).val()};
        $.get('/seraching', parameters, function(data) {
            $('#results').html(data);
            console.log('parsing json');
            var chartData = (data);
            console.log(chartData[0])
            drawChart(chartData, parameters.search);
        });
    }
});

});

Answer 1

所以，这里有几个问题在起作用。首先，使用 Express 和 Jade 传递经过处理的模板，使用带有搜索参数的 AJAX 获取一些数据，然后使用 Express 路由根据您发送的搜索参数发送一些数据。

最初您希望 Express 和 Jade 设置主页面:

ma​​in.jade

html
    head
        script(src='googlechart.js')
        script(src='myJS.js')
    body
        title Title
        h1 Heading
        input("type='text', id='search'")
        button("id='submit'")

因此，我们在这里确保加载了 Google 图表以及将包含您的 AJAX 调用的 JS。我还包含了搜索参数的文本框。

在您的 Express 应用中，您将像这样呈现页面:

app.get('/', function (req, res) {
    res.render("main.jade");
});

myJS.js

首先设置图表对象。然后，单击提交按钮时，使用 ajax 数据属性中搜索字段的值。解决 promise 后，显示结果。

var chart = new google.visualization.DataTable();
$('#submit').click(function () {
    var param = $('#search').val();
    $.ajax({
        url: '/getdata',
        dataType: 'JSON',
        data: { search: param }
    }).done(function (data) {

        // note that jQuery automatically parses JSON for you
        chart.addRows(data);
    });
});

但是!为此，您需要在 Express 中设置一个路由来处理 AJAX 调用，如下所示:

app.get('/getdata', function (req, res) {
    var param = req.param('search');

    // filter data by search param

    res.send(JSON.stringify(data));
});

因此，您只需要 Jade 一次即可设置主模板。当您提交 AJAX 请求时，您需要使用 Express 路由来传送 JSON 数据。

希望这是一个更好的答案:)哦，这里可能有一些错别字，因为我有一段时间没有使用 Express，但我很确定它是正确的。