在 jade 中用 nodejs 发送处理变量
Processing variables send with nodejs inside jade
我有一个发送矩阵的脚本,类似于 [[1,2,3,4], [7,6,5,4], [2,3,4,5]]
。当我使用 res.send(JSON.stringify(dataArray));
发送它并使用 h1#results
在 jade 中显示它时,我确实看到格式是正确的。
但是我想在 google 图表中使用这些数据。我的直觉会说像这样呈现数据:data.addRows = results;
。然而事实并非如此,因为玉不明白我的意思是变量发送。
我怀疑我不明白翡翠背后的一些基本原理。我知道大多数 jade/html 是固定的,只有 "script" 标签内的代码被执行,但据我所知 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);
});
}
});
});
所以,这里有几个问题。首先,使用 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 请求时,您需要通过 Express 路由传递 JSON 数据。
希望这是一个更好的答案:)哦,这里可能有一些错别字,因为我有一段时间没有使用 Express,但我很确定它是正确的。
我有一个发送矩阵的脚本,类似于 [[1,2,3,4], [7,6,5,4], [2,3,4,5]]
。当我使用 res.send(JSON.stringify(dataArray));
发送它并使用 h1#results
在 jade 中显示它时,我确实看到格式是正确的。
但是我想在 google 图表中使用这些数据。我的直觉会说像这样呈现数据:data.addRows = results;
。然而事实并非如此,因为玉不明白我的意思是变量发送。
我怀疑我不明白翡翠背后的一些基本原理。我知道大多数 jade/html 是固定的,只有 "script" 标签内的代码被执行,但据我所知 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);
});
}
});
});
所以,这里有几个问题。首先,使用 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 请求时,您需要通过 Express 路由传递 JSON 数据。
希望这是一个更好的答案:)哦,这里可能有一些错别字,因为我有一段时间没有使用 Express,但我很确定它是正确的。