ajax發送nodejs請求-前端問答-PHP中文網

ajax發送nodejs請求

PHPz

發布： 2023-05-08 10:05:37

原創

523 人瀏覽過

附註：本文將從前端角度介紹如何使用ajax發送nodejs請求，如果對nodejs不熟悉可以先了解一下。

隨著Web開發的不斷發展，前端與後端的資料互動成為了許多網站或應用程式的重要功能之一。而Ajax作為前端技術的重要組成部分，可以在不刷新頁面的情況下實現非同步請求和資料互動。而Node.js作為後端技術的一種流行選擇，也提供了方便的處理HTTP請求和回應的api。

那麼，要如何使用Ajax傳送Node.js請求呢？以下將從以下幾個面向進行介紹。

安裝和啟動Node.js服務

首先，需要安裝Node.js並建立一個Node.js服務。這裡不再介紹Node.js的安裝過程，假設已經完成了。

然後，在命令列中進入專案所在的資料夾，執行以下命令：

$ npm init -y
$ npm install express --save

登入後複製

以上命令會初始化一個Node.js專案並安裝Express框架。接著，創建一個名為app.js的文件，並在其中添加以下程式碼：

const express = require('express');
const app = express();

app.get('/api', (req, res) => {
  res.json({"message":"Hello World!"});
});

app.listen(3000, () => {
  console.log('Listening on port 3000');
});

登入後複製

以上程式碼創建了一個名為/api的路由，該路由會返回一個包含“Hello World!”訊息的JSON對象。 Node.js服務啟動後會監聽3000埠。

執行以下指令啟動Node.js服務：

$ node app.js

登入後複製

在瀏覽器中造訪http://localhost:3000/api，應該可以看到以下內容：

{"message":"Hello World!"}

登入後複製

這說明Node.js服務已經成功搭建好了，並且能處理HTTP請求。

使用Ajax傳送HTTP請求

接著，在前端頁面中使用Ajax傳送請求到Node.js服務。這裡以jQuery為例，首先需要在html檔中引入jQuery函式庫。可以使用CDN的方式引入，也可以直接下載jQuery檔案到本機。

在html檔案中加入以下程式碼：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
  <meta charset="utf-8">
  <title>Ajax Demo</title>
</head>
<body>
  <button id="btn">发送请求</button>
  <script>
    $(document).ready(function(){
      $('#btn').click(function(){
        $.ajax({
          url: '/api',
          type: 'GET',
          dataType: 'json',
          success: function(data){
            console.log(data);
          },
          error: function(xhr, status, error){
            console.log(error);
          }
        });
      });
    });
  </script>
</body>
</html>

登入後複製

以上程式碼建立了一個按鈕，當按鈕被點擊時，會使用jQuery的$.ajax()函數傳送一個GET請求到Node .js服務的/api路由。請求成功後，控制台會輸出從伺服器傳回的JSON物件。

可以透過選擇器選擇對應的DOM元素，綁定事件處理函數來實現頁面與後端的資料互動。這是Ajax極為重要的使用方式之一。

處理Node.js請求

最後，需要在Node.js服務中處理請求。在app.js中加入以下程式碼：

app.use(express.static('public'));

app.get('/', (req, res) => {
  res.sendFile(__dirname+'/public/index.html');
});

登入後複製

以上程式碼為Node.js服務新增了一個靜態檔案服務，並設定了主頁為public資料夾下的index.html檔案。

現在可以在瀏覽器中開啟http://localhost:3000，點選「傳送請求」按鈕，控制台就會輸出從伺服器傳回的JSON對象，頁面也會顯示「Hello World!」訊息。

總結

本文介紹如何使用Ajax傳送Node.js請求，並對前端和後端如何互動進行了簡要介紹。透過這種方式，前端可以相對輕鬆地與後端進行資料交互，實現更豐富的功能和更好的使用者體驗。當然，Node.js處理HTTP請求的能力還遠不止於此，更為複雜和完善的功能還需要深入學習與實踐。

以上是ajax發送nodejs請求的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

ajax發送nodejs請求