本案例實現的目的，主要不是爲了使用node，而是通過簡單的關聯關係，來看ajax的特性，以及我們要如何使用ajax。所以下面幾段代碼，可以更關注前端js中ajax的內容，以及服務端server.js的接受機制。
實現過程：
HTML代碼
- 在html裏面，增加容器button和類名爲“datamug”的p容器。
- 底部加載jq和test.js文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hello world100!
<button>點擊我吧！</button>
<p class="datamug"></p>
</body>
<script src="./js/jquery-3.6.0.js"></script>
<script src="./js/test.js"></script>
</html>
前端javascript文件test.js
- 按鈕單擊的時候，觸發異步請求get
- 使用jq的get方法，把鏈接/butclick上的數據，傳遞給服務器
- 將數據庫的數據通過data傳回來，並把數據放到類名爲datamug的容器中
$(function(){
console.log("Hello world!")
$("button").click(function(){
$.get("/butclick?value=12345", function(data, status){
alert("數據：" + data);
$(".datamug").append(data);
});
});
});
服務端javascript文件server.js
- 假設我們已經加載了express的包了
- 在app上接收鏈接/butclick的請求
- 把請求上的數據從req.query.value中獲取過來
- 打印獲取的數據
- 把數據拼接給對象data
- 把data打包到響應中，傳遞給前端
- 關閉響應
const express = require('express')
const path = require('path')
const app = express()
app.use(express.static(path.join(__dirname, 'public')))
app.get("/butclick", function(req, res){
console.log(req.query.value);
var data = "this is a data!" + req.query.value;
res.send(data);
res.end();
});
app.listen(8080, () => {
console.log('App listening at port 8080, 你可以進入查看http://127.0.0.1:8080/');
})
界面效果：
-
點擊前：
![]()
-
點擊後：
![]()
-
關閉彈窗：
![]()
過程分析：
- 使用jq調用ajax，代碼更簡單
- ajax簡單的講，就是具有異步數據傳輸能力的一個工具，有load，get和post等方法，適用各種異步數據傳輸的場景。我們這個案例使用get，所以數據需要放在發送請求的鏈接上。
- ajax的基本過程就是，發送一個請求（請求的名字隨意取），請求帶參數。請求發送給服務器端，服務器端對應接收，然後拿到請求的數據之後，再經過加工處理，把結果數據給響應對象打包，響應對象打包了之後，就回傳給前端。