javascript - NODEJS API : How to render . pug 并同时发送 AJAX 响应？

Question

我正在尝试通过 fetch() 请求使用来自网络服务器的数据动态更新 Chart.js 图表

res.send({myData: data});

问题是: res.send() 删除浏览器上的 pug 模板。在屏幕上渲染模板时，使用 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

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

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

    // rest of your code goes here
});

现在，您的图表不更新的原因可能有多种。对于初学者来说，不要在 Node 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 请求的响应提供。

对于 future ，最好将服务器渲染页面和 API 分开。