HTML 是一种用于创建网页的标准标记语言，它本身并不支持发送 HTTP 请求，我们可以使用 JavaScript 来结合 HTML 实现发送 POST 请求的功能，在本文中，我们将介绍如何使用 JavaScript 的 Fetch API 和 XMLHttpRequest 对象来实现 HTML 中的 POST 请求。
1. 使用 Fetch API
Fetch API 是一个现代的网络请求接口，它提供了一种简单、合理的方式来处理网络请求，以下是使用 Fetch API 发送 POST 请求的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch API Post Request</title>
</head>
<body>
<button id="postBtn">发送 POST 请求</button>
<script>
const postBtn = document.getElementById('postBtn');
postBtn.addEventListener('click', async () => {
const url = 'https://example.com/api/data';
const data = {
key1: 'value1',
key2: 'value2'
};
try {
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
if (response.ok) {
const result = await response.json();
console.log(result);
} else {
console.error('请求失败');
}
} catch (error) {
console.error('请求出错：', error);
}
});
</script>
</body>
</html>
在这个示例中，我们首先获取了页面上的按钮元素，并为其添加了一个点击事件监听器，当用户点击按钮时，我们会使用 Fetch API 发送一个 POST 请求到指定的 URL，我们设置了请求的方法为 'POST'，并设置了请求头 'Content-Type' 为 'application/json'，表示我们发送的数据是 JSON 格式，我们将要发送的数据转换为 JSON 字符串，并将其作为请求体发送，我们检查响应的状态码，如果状态码表示成功（即 response.ok 为 true），则将响应体解析为 JSON 对象并打印到控制台；否则，打印错误信息。
2. 使用 XMLHttpRequest 对象
除了使用 Fetch API，我们还可以使用 XMLHttpRequest 对象来实现 HTML 中的 POST 请求，以下是使用 XMLHttpRequest 对象发送 POST 请求的示例代码：
<div id="content"></div>
<button id="postBtn">发送 POST 请求</button>
<script>
const postBtn = document.getElementById('postBtn');
const content = document.getElementById('content');
postBtn.addEventListener('click', () => {
const xhr = new XMLHttpRequest();
const url = 'https://example.com/api/data';
const data = {
key1: 'value1',
key2: 'value2'
};
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
content.innerHTML = JSON.stringify(JSON.parse(xhr.responseText));
} else if (xhr.readyState === 4) {
content.innerHTML = '请求失败';
}
};
xhr.send(JSON.stringify(data));
});
</script>
在这个示例中，我们首先获取了页面上的按钮元素和内容区域元素，当用户点击按钮时，我们会创建一个 XMLHttpRequest 对象，并设置其方法和 URL，我们设置请求头 'Content-Type' 为 'application/json'，表示我们发送的数据是 JSON 格式，接下来，我们为 onreadystatechange 事件添加了一个回调函数，该函数会在请求状态发生变化时被调用，当请求完成（即 readyState 为 4）且状态码表示成功（即 status 为 200）时，我们将响应体解析为 JSON 对象，并将其转换为字符串并设置为内容区域的元素文本；否则，将内容区域的元素文本设置为 "请求失败"，我们使用 send 方法发送请求，并将要发送的数据转换为 JSON 字符串作为参数传递。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/241340.html
微信扫一扫 