[NodeJS] Express + EJS 框架下實現 AJAX-Waku

[NodeJS] Express + EJS 框架下實現 AJAX

04/18/2024

在這篇文章中，我們將學習如何在使用Express框架和EJS模板的Node.js應用程式中實現AJAX。這將使我們能夠在不重新加載頁面的情況下進行數據交換和更新部分網頁內容。

開始之前

在開始之前，請確保您已安裝Node.js。接下來，我們將創建一個新的專案並安裝必要的依賴項：

1. 創建專案和安裝依賴

   mkdir express-ejs-ajax
   cd express-ejs-ajax
   npm init -y
   npm install express ejs body-parser

2. 設置Express伺服器

在專案根目錄下創建一個app.js檔案：

   const express = require('express');
   const bodyParser = require('body-parser');
   const app = express();
   const port = 3000;
   app.set('view engine', 'ejs');
   app.use(bodyParser.urlencoded({ extended: true }));
   app.use(express.static('public'));
   app.get('/', (req, res) => {
       res.render('index');
   });
   app.listen(port, () => {
       console.log(`Server is running on http://localhost:${port}`);
   });

3. 創建EJS模板

在根目錄下創建一個`views`文件夾，並在其中創建`index.ejs`檔案：

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
   </head>
   <body>
       <h1>AJAX with Express and EJS</h1>
       <button onclick="fetchData()">Fetch Data</button>
       <div id="data"></div>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
       <script>
           function fetchData() {
               $.ajax({
                   url: '/get-data',
                   type: 'GET',
                   success: function(data) {
                       $('#data').html(data);
                   }
               });
           }
       </script>
   </body>
   </html>

4. 處理AJAX請求

在`app.js`中添加一個路由來處理AJAX請求：

   app.get('/get-data', (req, res) => {
       res.send('Data fetched successfully!');
   });

測試應用程序

1. 運行您的Express伺服器：

   node app.js

2. 在瀏覽器中訪問 [http://localhost:3000](http://localhost:3000)。您應該會看到一個按鈕，點擊它時，會從Express服務器獲取數據並顯示在頁面上。

結論

通過這個基本的教學，您已經學會了如何在Express和EJS環境中使用AJAX來進行非同步數據交換。這可以幫助您在不重新加載整個頁面的情況下更新網頁的特定部分，從而提供更流暢和響應更快的用戶體驗。進一步，您可以根據需要擴展這個概念，處理更複雜的數據和交互。

Jun Min

"我是一個勇於挑戰、熱愛創新的網頁全端工程師，除了扎實的技術能力,我更願意從同理心出發,設身處地思考問題,換位思考用戶和團隊成員的需求。待人處事謙和有禮,熱誠以懷。與此同時,我亦重視清晰的溝通與協作,能高效整合多方資源,共同完成目標。"

Waku Piece

[NodeJS] Express + EJS 框架下實現 AJAX

Jun Min

Tag Cloud