Question

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

但是我想在谷歌图表中使用这些数据。我的直觉会说这样的数据：data.addRows = results;。然而情况并非如此，因为玉不明白我的意思是变量send。

我怀疑我不了解玉背后的一些基本原理。据我所知，大多数jade / html都是固定的，只有“脚本”标签内的代码才能执行，但据我所知，google 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设置主页面：

<强> main.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数据属性中的搜索字段的值。一旦解决了承诺，就会显示结果。

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请求时提供JSON数据所需的Express路由。

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

处理变量与jade中的nodejs一起发送

1 个答案: