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

Question

我正在尝试使用来自Web服务器的数据通过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();


}

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

Answer 1

我看不到服务器实际呈现的代码，但是如果您的表单包含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分开。

Answer 2

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