节点ejs单击功能脚本

问题描述

我有一个使用图形API的简单函数，我想在用户按下按钮时运行它。我正在运行的文件是一个ejs文件，其中的页眉和页脚为前缀，后缀为代码。

我的代码如下：

<%- include("./partials/header")%>
<script type="text/javascript" src ="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

<button onclick="<%Functions.common1()%>">Click me</button>

<canvas id="myChart" width="400" height="300"></canvas>

<button onclick="<%Functions.common1()%>">Graph me</button>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx,{
    type: 'bar',data: {
        labels: ['Red','Blue','Yellow','Green','Purple','Orange'],datasets: [{
            label: '# of Votes',data: [12,19,3,5,2,3],backgroundColor: [
                'rgba(255,99,132,0.2)','rgba(54,162,235,'rgba(255,206,86,'rgba(75,192,'rgba(153,102,255,159,64,0.2)'
            ],borderColor: [
                'rgba(255,1)',1)'
            ],borderWidth: 1
        }]
    },options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>
<%- include("./partials/footer")%>

我有一个名为common1的函数，该函数是另一个文件中的导出函数，该文件称为console.logs一个字符串。我希望通过单击按钮来运行整个脚本来运行图形，我该怎么做？

解决方法

您不能直接从客户端代码中触发服务器端代码。

从服务器请求页面时：

将执行EJS模板
<%Functions.common1()%>将得到评估（您说它只是记录一个字符串，因此此时它将在服务器的控制台上执行此操作）
结果（包括onclick=""，因为<%Functions.common1()%>不会向模板输出任何内容）将被发送到浏览器。
单击将不会执行任何操作，因为onclick函数主体为空

如果要在单击按钮时在服务器上执行common1()，则需要编写一个将执行此操作的Web服务，然后使用HTTP请求触发它（例如，使用fetch函数）。

如果要在单击按钮时在浏览器上执行onclick，则需要使用common1()元素将其包含在页面中，并将函数调用直接放在{ {1}}函数（即不在EJS标记内）。

如果要单击运行生成图形的代码，则将 that 放入函数中，然后调用 that 函数。

进一步阅读：What is the difference between client-side and server-side programming?。

function function function html javascript