Javascript nodejsapi：如何同时呈现.pug和发送AJAX响应？

我正在尝试通过

fetch（）

request（例如，

res.send({myData: data});

问题是：

res.send（）

删除浏览器上的pug模板。在屏幕上呈现模板时，用

fetch（）

响应填充图表的最佳方法是什么

index.js-节点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();


}

---

关于如何实现这一点有什么想法吗？

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

您可以有两个单独的JSON后端端点和一个常规模板，或者在客户端

fetch

中发送“Content type”：“application/JSON”头，然后在服务器端代码中检查该头。如果标题存在，那么您可以使用

res.json（）

来响应，如果

res.send（）

您的意思的示例代码会很好，我不明白您可以从替换

res.send（{myData:data}）开始带有
res.json（{myData:data}）
，在你的Node index.js中，有一个可能足够的通道，但是chartjs没有更新我已经编辑了答案-其他信息应该可以帮助你解决图表不呈现的问题。