HTML 单页面按钮发送 POST 请求，单 IP 限时请求次数 - 原理与实践 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>Post 请求限制</title>
	<style>
		.container {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
		}
		.btn {
			padding: 10px 20px;
			background-color: #4CAF50;
			color: white;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class='container'>
		<button class='btn' onclick='sendPost()'>发送Post请求</button>
	</div>
<pre><code>&lt;script&gt;
	let count = 0;

	function sendPost() {
		if (count &gt;= 3) {
			alert('您已经请求了 3 次，不能再发送请求了！');
			return;
		}

		// 创建XMLHttpRequest对象
		let xhr = new XMLHttpRequest();

		// 设置请求头
		xhr.setRequestHeader('Content-Type', 'application/json');

		// 监听请求状态变化
		xhr.onreadystatechange = function() {
			if (xhr.readyState === 4) {
				if (xhr.status === 200) {
					console.log(xhr.responseText);
					count++;
				} else {
					console.error(xhr.statusText);
				}
			}
		}

		// 设置请求体
		let data = {ip: '127.0.0.1'};
		xhr.send(JSON.stringify(data));
	}
&lt;/script&gt;
</code></pre>
</body>
</html>
<h2>POST 请求原理及使用方法</h2>
<p>本页面通过 <code>XMLHttpRequest</code> 对象发送 POST 请求，并限制同一 IP 地址在 1 小时内只能请求 3 次。</p>
<p><strong>1. 请求方法原理</strong></p>
<p>使用 <code>XMLHttpRequest</code> 对象发送请求，监听请求状态变化，根据状态码判断请求是否成功，并处理返回的数据。</p>
<p><strong>2. 使用方法</strong></p>
<ul>
<li>点击页面中的按钮，即可发送 POST 请求。</li>
<li>请求头需要设置 <code>Content-Type</code> 为 <code>application/json</code>，请求体需传入一个 JSON 对象，其中包含要限制的 IP 地址。</li>
<li>当请求状态为 4（已完成）且状态码为 200 时，说明请求成功，可以在控制台中查看返回的数据。</li>
</ul>
<p><strong>3. 请求头编辑</strong></p>
<pre><code class="language-javascript">xhr.setRequestHeader('Content-Type', 'application/json');
</code></pre>
<p><strong>4. 请求体编辑</strong></p>
<pre><code class="language-javascript">let data = {ip: '127.0.0.1'};
xhr.send(JSON.stringify(data));
</code></pre>
<h2>实现单 IP 限时请求次数</h2>
<p>为了限制同一 IP 地址在 1 小时内只能请求 3 次，可以在服务器端记录每个 IP 地址的请求时间和次数，并在接收到请求时进行校验。</p>
<ul>
<li>如果请求次数超过限制，则返回错误信息。</li>
<li>如果请求次数未超过限制，则更新记录并处理请求。</li>
</ul>
<h2>总结</h2>
<p>本页面演示了如何使用 HTML 创建一个按钮，点击发送 POST 请求，并限制同一 IP 地址在 1 小时内只能请求 3 次。文章解释了 POST 请求原理，并详细说明如何设置请求头和请求体。希望对您理解和应用 POST 请求有所帮助。</p>