本文旨在阐明ajax post请求与传统html表单post提交在数据处理和页面重定向方面的根本区别。我们将探讨为何ajax请求后直接重定向无法获取`$_post`数据，并提供在需要重定向并携带post数据时，如何使用传统表单提交的正确实践，同时也会简要介绍ajax的恰当使用场景。
AJAX POST请求的机制与数据处理
AJAX（Asynchronous JavaScript and XML）的核心在于其“异步”特性。当使用JavaScript（如XMLHttpRequest或fetch API）发起一个AJAX POST请求时，浏览器会在后台向服务器发送数据，而当前页面不会发生刷新或跳转。服务器接收到数据后进行处理，并将响应（可以是HTML片段、JSON数据、纯文本等）返回给发起请求的JavaScript代码。
在服务器端，PHP脚本可以通过$_POST超全局变量访问到AJAX请求发送过来的数据。然而，这个$_POST数据仅在处理当前AJAX请求的PHP脚本执行期间有效。一旦PHP脚本完成执行并发送响应，$_POST变量的生命周期也就结束了。
原始代码示例中的问题在于：
<script>
var xhr = new XMLHttpRequest();
xhr.open("POST", "2.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 问题所在：这里发起了一个新的GET请求
window.location.href = "2.php";
}
};
xhr.send("username=John&email=john.doe@example.com");
</script>当xhr.onreadystatechange回调函数中执行window.location.href = "2.php"时，这会触发浏览器向2.php发起一个全新的HTTP请求。默认情况下，window.location.href会发起一个GET请求。这个新的GET请求与之前AJAX发送的POST请求是完全独立的，因此，在2.php页面中，$_POST变量将是空的，因为它没有收到任何POST数据。
传统表单POST提交的机制
与AJAX不同，传统的HTML表单提交是一种同步操作。当用户提交一个method="POST"的表单时，浏览器会将表单数据打包成POST请求体，然后将用户导航到action属性指定的URL。在这个过程中，浏览器会加载新的页面，并且新的页面（即action指向的PHP脚本）能够通过$_POST超全局变量直接访问到表单提交的数据。
这是因为表单提交本身就是一个包含POST数据的HTTP请求，它直接导致了页面的加载。
实现重定向并携带POST数据的正确方法
如果你的目标是发送数据，然后让用户跳转到一个新页面，并且新页面能够直接访问这些POST数据，那么最直接和推荐的方法就是使用传统的HTML表单提交。
你可以通过JavaScript动态地创建一个表单，填充数据，然后提交它。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动态提交表单示例</title>
</head>
<body>
<!-- 隐藏表单，用于JavaScript动态提交 -->
<form id="dataSubmitForm" method="POST" action="2.php" style="display:none;">
<input type="hidden" name="username" value="">
<input type="hidden" name="email" value="">
</form>
<button onclick="submitUserData('Alice', 'alice.smith@example.com')">提交Alice的数据</button>
<button onclick="submitUserData('Bob', 'bob.jones@example.com')">提交Bob的数据</button>
<script>
/**
* 动态填充数据并提交表单
* @param {string} username 用户名
* @param {string} email 邮箱
*/
function submitUserData(username, email) {
const form = document.getElementById('dataSubmitForm');
// 填充表单字段
form.querySelector('input[name="username"]').value = username;
form.querySelector('input[name="email"]').value = email;
// 提交表单，触发页面跳转
form.submit();
}
// 可以在页面加载后立即调用，模拟初始提交
// submitUserData('John', 'john.doe@example.com');
</script>
</body>
</html>2.php 页面内容：
<?php
// 检查是否为POST请求，并获取数据
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$username = isset($_POST['username']) ? htmlspecialchars($_POST['username']) : 'N/A';
$email = isset($_POST['email']) ? htmlspecialchars($_POST['email']) : 'N/A';
echo "<h1>数据接收成功！</h1>";
echo "<p>接收到的用户名: " . $username . "</p>";
echo "<p>接收到的邮箱: " . $email . "</p>";
} else {
echo "<h1>请通过POST请求提交数据。</h1>";
}
?>代码解释：
- 我们创建了一个隐藏的
- 表单中包含type="hidden"的input字段，用于存放要发送的数据。
- submitUserData JavaScript函数负责接收数据，将其赋值给隐藏表单中的相应字段。
- 调用form.submit()方法会模拟用户点击提交按钮，从而触发浏览器发送POST请求到2.php，并加载该页面。此时，2.php就能通过$_POST获取到数据。
何时使用AJAX？
AJAX适用于以下场景：
- 无刷新更新页面部分内容： 例如，点赞、评论提交、加载更多数据等，不希望整个页面重新加载。
- 后台数据验证： 在用户输入时实时验证表单字段（如用户名是否已存在），无需提交整个表单。
- 获取JSON或其他API数据： 与RESTful API交互，获取结构化数据并在前端进行渲染。
- 上传文件（异步）： 在不阻塞用户界面的情况下上传大文件。
如果你使用AJAX发送数据，并且希望在当前页面显示服务器的响应，你应该在AJAX请求的onreadystatechange（或fetch的.then()）回调函数中处理服务器返回的数据，而不是重定向。
AJAX正确处理响应的示例：
<script>
var xhr = new XMLHttpRequest();
xhr.open("POST", "2.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 在这里处理服务器返回的响应，例如更新页面元素
document.getElementById('responseDiv').innerHTML = xhr.responseText;
console.log("服务器响应:", xhr.responseText);
// 不进行页面跳转
}
};
xhr.send("username=AJAXUser&email=ajax@example.com");
</script>
<div id="responseDiv"></div>在这种情况下，2.php仍然会处理$_POST数据并返回一个响应（例如一段HTML或JSON），但这个响应会被JavaScript捕获并用于更新当前页面的特定区域，而不是触发页面跳转。
总结
理解AJAX和传统表单提交的工作原理至关重要。AJAX用于异步通信，不刷新页面；而传统表单提交则会导致页面刷新或重定向，并在此过程中传递POST数据。如果你需要将数据发送到服务器并随后重定向到另一个页面，同时希望该页面能够访问这些数据，那么使用JavaScript动态提交一个隐藏的HTML表单是最佳实践。如果你的目标是在不刷新页面的情况下与服务器交互并处理响应，那么AJAX是正确的选择，但响应的处理应在JavaScript回调函数中完成，而非通过window.location.href进行重定向。
