express ejs前端訪問API處理節點

Question

我已經建立了一個工作的、非常簡單的快速服務器，使用 ejs 作為我的視圖引擎。

我的 web 頁面有一個表單，按下 html 按鈕，輸入變成 json object userFormData 。 我有另一個 node.js 文件處理與 API 的交互。在這個文件中，我有一個 function createNewFromUserFormData(userFormData) 。 我現在想知道從前端獲取 userFormData 到后端的 API 處理 js 節點的最佳方法是什么。 有什么方法可以從視圖文件夾中的前端 index.ejs 調用節點上的 function 嗎？

基本上我的問題只是：如何將 json 從 webapp 導出到節點服務器？ 有什么辦法可以從onclick上的 onclick 調用后端的 function 嗎？

Answer 1

EJS （嵌入式 JavaScript）是一個使用 vanilla JavaScript的模板引擎，它將生成 static HTML文檔（或部分文檔）。

處理任何事件（網絡、用戶...）會將 go 放入HTML文檔嵌入script中。

您應該能夠附加一個事件處理程序作為onclick function 調用您的后端 API（以及您應該作為請求負載發送的任何內容）。

下面是一個簡單的EJS模板文件示例，它使用 vanilla JavaScript來注冊一個click事件處理程序，該處理程序fetch一個遠程 API（應該是您的內部路由端點）以顯示其結果：

<span id='link'>
    <% if (true) { %>
        <%= 'Guess what to do?' %>
      <% } %>
</span>
<p id="activity"></p>

<script>
    const linkNode = document.querySelector('#link');
    linkNode.addEventListener('click', () => {
        fetch('https://www.boredapi.com/api/activity')
            .then((res) => res.json())
            .then((res) => {
                const textNode = document.querySelector('#activity');
                textNode.textContent = res.activity;
            });
    });
</script>