理解AJAX POST请求与传统表单提交：PHP数据处理与页面跳转的正确姿势

// 错误的尝试示例
<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) {
            // 这里仅仅是AJAX请求成功，服务器可能已经处理了数据
            // 但 window.location.href 会发起一个新的GET请求
            window.location.href = "2.php"; 
        }
    };
    xhr.send("username=John&email=john@example.com");
</script>

// 2.php 页面
<?php
// 当通过 window.location.href 访问时，这是一个GET请求
// 因此 $_POST 将是空的
$username = $_POST['username'] ?? 'N/A';
$email = $_POST['email'] ?? 'N/A';

echo "Received username: " . $username . "<br>";
echo "Received email: " . $email;
?>

<form id="data-submission-form" method="POST" action="2.php">
  <input type="hidden" name="username" value="">
  <input type="hidden" name="email" value="">
  <!-- 可以在这里添加更多隐藏字段 -->
</form>

<script>
/**
 * 动态填充并提交表单以实现带数据的页面跳转。
 * @param {string} username 用户名
 * @param {string} email 邮箱
 */
function submitDataAndRedirect(username, email) {
  const form = document.getElementById('data-submission-form');

  // 填充表单字段
  form.querySelector('input[name="username"]').value = username;
  form.querySelector('input[name="email"]').value = email;

  // 提交表单，这将导致页面跳转
  form.submit();
}

// 示例调用：
// 假设您从某个事件或变量中获取了 'John' 和 'john@example.com'
submitDataAndRedirect('John', 'john@example.com');
</script>

<?php
// 确保数据存在，并进行安全过滤
$username = isset($_POST['username']) ? htmlspecialchars($_POST['username']) : 'N/A';
$email = isset($_POST['email']) ? htmlspecialchars($_POST['email']) : 'N/A';

echo "<h1>数据接收成功！</h1>";
echo "收到的用户名: " . $username . "<br>";
echo "收到的邮箱: " . $email;

// 可以在这里进一步处理数据，如保存到数据库等
?>

<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) {
            // 服务器的响应在 xhr.responseText 中
            console.log("服务器响应:", xhr.responseText);
            // 在这里更新当前页面的内容，而不是跳转
            document.getElementById('response-area').innerHTML = xhr.responseText;
        } else if (xhr.readyState === 4 && xhr.status !== 200) {
            console.error("AJAX请求失败:", xhr.status);
        }
    };
    xhr.send("username=Alice&email=alice@example.com");
</script>

<!-- HTML中用于显示响应的区域 -->
<div id="response-area">
    等待服务器响应...
</div>

<?php
header('Content-Type: application/json'); // 告知客户端返回的是JSON数据

$username = isset($_POST['username']) ? htmlspecialchars($_POST['username']) : null;
$email = isset($_POST['email']) ? htmlspecialchars($_POST['email']) : null;

$response = [];

if ($username && $email) {
    // 模拟数据处理，例如保存到数据库
    // ...
    $response['status'] = 'success';
    $response['message'] = '数据已成功接收并处理。';
    $response['data'] = [
        'username' => $username,
        'email' => $email
    ];
} else {
    $response['status'] = 'error';
    $response['message'] = '缺少必要的参数。';
}

echo json_encode($response);
exit(); // 确保不再输出其他内容
?>