如何在不重新加载页面的情况下使用 Ajax 将数据从客户端发送到节点服务器？(1)

📌 相关文章

📜 如何在不重新加载页面的情况下使用 Ajax 将数据从客户端发送到节点服务器？(1)

📅 最后修改于: 2023-12-03 15:09:00.268000 🧑 作者: Mango

如何在不重新加载页面的情况下使用 Ajax 将数据从客户端发送到节点服务器？

Ajax (Asynchronous JavaScript and XML) 是一种常用的前端技术，允许通过 JavaScript 后台发送异步请求，以便不必刷新整个页面即可更新部分内容。在该技术中，服务器返回的数据可以以多种格式包括 XML、JSON 或者 HTML 等形式。

下面是一个示例，向 Node.js 服务器发送 POST 请求并在不重新加载页面的情况下显示响应：

HTML 代码

<!DOCTYPE html>
<html>
<head>
	<title>Ajax Example</title>
</head>
<body>
	<form id="ajax-form" method="POST">
		<label for="name">Name:</label>
		<input type="text" id="name" name="name">
		<br>
		<label for="email">Email:</label>
		<input type="email" id="email" name="email">
		<br>
		<button type="submit">Submit</button>
	</form>

	<div id="output"></div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="script.js"></script>
</body>
</html>

JavaScript 代码

$(document).ready(function() {
	// 处理表单提交事件
	$('#ajax-form').submit(function(event) {
		// 阻止表单提交
		event.preventDefault();

		// 发送数据到服务器
		$.ajax({
			url: '/submit',
			type: 'POST',
			data: $('#ajax-form').serialize(),
			success: function(response) {
				// 显示服务器返回的响应
				$('#output').html(response);
			},
			error: function(xhr) {
				// 显示错误消息
				$('#output').html('Error: ' + xhr.status);
			}
		});
	});
});

Node.js 代码

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;

// 启用 body-parser 中间件来解析 POST 请求正文
app.use(bodyParser.urlencoded({ extended: true }));

// 处理 POST 请求 /submit
app.post('/submit', (req, res) => {
	const name = req.body.name;
	const email = req.body.email;
	res.send(`Hello ${name}! Your email is ${email}.`);
});

// 启动服务器
app.listen(port, () => {
	console.log(`Server listening on port ${port}.`);
});

在这个例子中，客户端使用 jQuery 发送 POST 请求到 Node.js 服务器，并将表单数据序列化。服务器使用 Express 框架来处理 POST 请求。在服务器端，使用 body-parser 中间件来解析 POST 请求正文。服务器返回一个 HTTP 响应，它包含用户提交的名称和电子邮件地址。

在成功响应情况下，客户端使用 jQuery 更新其 DOM，并显示服务器返回的响应消息。如果出现错误，客户端会显示一条错误消息。