在前端开发中，使用 AJAX 技术可以在不刷新整个页面的情况下，通过异步请求获取数据并更新页面。Express.js 是一个流行的 Node.js 框架，可以用于创建 Web 应用程序。jQuery 是一个常用的 JavaScript 库，提供了方便的 DOM 操作和 AJAX 请求功能。本文将介绍如何使用 Express.js 和 jQuery 创建 AJAX 请求。
准备工作
在开始之前，需要安装 Node.js 和 Express.js。可以使用以下命令安装：
$ sudo apt-get install nodejs $ sudo npm install express --save
然后，在项目目录下创建一个名为 server.js 的文件，用于创建 Express.js 应用程序。在 server.js 文件中，添加以下代码：
const express = require('express');
const app = express();
app.use(express.static('public'));
app.listen(3000, function () {
console.log('Server started on port 3000');
});上面的代码创建了一个 Express.js 应用程序，并将静态文件目录设置为 public。同时，将应用程序监听在 3000 端口上。
接下来，需要在 public 目录下创建一个名为 index.html 的文件，用于测试 AJAX 请求。在 index.html 文件中，添加以下代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>AJAX Test</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="load-data">Load Data</button>
<div id="result"></div>
<script>
$('#load-data').click(function() {
$.get('/data', function(data) {
$('#result').text(data);
});
});
</script>
</body>
</html>上面的代码创建了一个按钮 Load Data 和一个 div 元素 result。当点击按钮时，使用 jQuery 的 $.get 方法向服务器发送 AJAX 请求，并将响应数据显示在 result 元素中。
创建 AJAX 请求
现在，需要在 Express.js 应用程序中创建一个路由，用于响应 AJAX 请求。在 server.js 文件中，添加以下代码：
app.get('/data', function (req, res) {
res.send('Hello, AJAX!');
});上面的代码创建了一个路由 /data，当接收到 AJAX 请求时，将响应一个字符串 Hello, AJAX!。
现在，启动 Express.js 应用程序：
$ node server.js
在浏览器中打开 http://localhost:3000，点击 Load Data 按钮，可以看到 Hello, AJAX! 字符串显示在页面上。
发送数据
除了获取数据，还可以使用 jQuery 的 $.post 方法发送数据。例如，可以在 index.html 文件中添加一个表单，用于向服务器发送数据：
// javascriptcn.com 代码示例
<form id="send-data">
<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="Email">
<button type="submit">Send Data</button>
</form>
<script>
$('#send-data').submit(function(event) {
event.preventDefault();
$.post('/data', $(this).serialize(), function(data) {
$('#result').text(data);
});
});
</script>上面的代码创建了一个表单 send-data，包含两个输入框和一个提交按钮。当提交表单时，使用 jQuery 的 $.post 方法向服务器发送数据，并将响应数据显示在 result 元素中。
在 Express.js 应用程序中，需要添加一个路由，用于响应 POST 请求。在 server.js 文件中，添加以下代码：
app.post('/data', function (req, res) {
res.send('Hello, ' + req.body.name + '!');
});上面的代码创建了一个路由 /data，当接收到 POST 请求时，将响应一个字符串 Hello, {name}!，其中 {name} 是表单中输入的名称。
总结
本文介绍了如何使用 Express.js 和 jQuery 创建 AJAX 请求。通过学习本文，可以了解 AJAX 技术的基本原理和使用方法，以及如何使用 Express.js 和 jQuery 创建 Web 应用程序。希望本文对于前端开发初学者有所帮助。完整示例代码可以在 GitHub 上找到。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655ac91fd2f5e1655d4fcdc4