NODEJS API:如何呈现.pug并同时发送AJAX响应?

时间:2018-11-20 08:34:30

标签: javascript node.js ajax chart.js fetch

我正在尝试使用通过fetch()请求(例如

)来自网络服务器的数据动态更新Chart.js图
res.send({myData: data});

问题是res.send()删除浏览器上的哈巴狗模板。在屏幕上呈现模板时,用fetch()响应填充图表的最佳方法是什么?

index.js-NODE API

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {

  res.render('index', { title: 'Express' });
});

router.post('/', function(req, res, next) {
  if(req.body.name) {
    console.log(req.body.name);
    data = [100, 200, 150, 100];
  } else {
    data = [0, 0, 0, 0];
  }

  res.send({myData: data});
  // res.render('index', { graph_data: data });

});



module.exports = router;

myscript.js-具有Ajax请求的客户端脚本

// make an ajax fetch request to the server for graph data and populate it.
document.getElementById("form").addEventListener("submit", function(event) {

    // get for inputs to send to server
    let name = document.getElementById("form-name").value;
    console.log("fetch...");

    // event.defaultPrevented();    
    // give endpoint, and create a request to send
    fetch("/", {
        method: 'POST',
        headers: new Headers(),
        body: JSON.stringify({ name: name})
    }).then(function(response) {
            console.log("response returned..")
            return response.json();
        }).then(function(myJson) {
            console.log("populated data.")
            populateGraph(myJson);
    });

});

console.log("populated data.")



var ctx = document.getElementById("myChart");

function populateGraph(myJson) {
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: '# of Votes',
                data: [0, 0, 0],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive:true,
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });

    myChart.data.datasets[0].data.push(myJson.myData);
    myChart.update();


}

关于如何进行这项工作的任何想法?

2 个答案:

答案 0 :(得分:0)

我没有看到服务器实际呈现的代码,但是如果您的表单包含action属性,那么您需要防止其在提交时的默认行为。为此,请修改您的“提交”事件侦听器回调:

document.getElementById("form").addEventListener("submit", function(event) {
    event.preventDefault(); // don't execute default browser's behaviour

    // rest of your code goes here
});

现在,图表可能没有更新的原因可能有多种。对于初学者,不要在节点API中使用res.send(),而是使用 res.json()-这样,您的服务器将以json格式发送数据。另外,我将移动这行...

var ctx = document.getElementById("myChart");

...到populateGraph函数以使其自给自足。

最后,请记住使用

myChart.data.datasets[0].data.push(myJson.myData);

您实际上是在向数据集的数据数组添加值。因此,图表上标签的值将为:

Red: 0
Blue: 0
Yellow: 0
Green: 100
Purple: 200
Orange: 150

最后一个数字(100)不会分配给任何标签。

在旁注中,POST请求应该用于发送服务器数据,而不是获取数据。我知道您可能只是在尝试Express,但是在设计API时,它应该将数据作为对GET请求的响应。

为了将来,最好使服务器呈现页面和API分开。

答案 1 :(得分:0)

您可以为JSON和常规模板使用两个单独的后端端点,或者在客户端fetch中发送“ Content-type”:“ application / json”标头,然后在服务器端代码。如果标题存在,则可以使用res.json()进行响应,而不是res.send()