我对 AJAX 还很陌生，并且正在努力解决这个问题，我认为这很大程度上是toggle.php 的问题。我有这段代码，它在大多数情况下都有效。但是，当手动重新加载页面并且切换 = ON 时，状态会混合，因此按钮处于关闭状态。 PHP 似乎没有重置并且处于开启状态。我尝试更改一些内容，但似乎找不到逻辑错误。
fetchToggleStatus 函数是 chatgpt 添加的，并带来了一些帮助。所以不妨删除它。
切换按钮.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Toggle with AJAX and PHP</title>
</head>
<body>
<button id="toggleButton">Toggle</button>
<div id="resultContainer"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var toggleButton = document.getElementById('toggleButton');
var resultContainer = document.getElementById('resultContainer');
// Fetch the initial toggle state when the page loads
fetchToggleStatus();
toggleButton.addEventListener('click', function () {
var xhr = new XMLHttpRequest();
xhr.open('POST', 'toggle.php', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
resultContainer.innerHTML = xhr.responseText;
updateButtonAppearance();
}
};
xhr.send();
});
function fetchToggleStatus() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'toggle.php', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
resultContainer.innerHTML = xhr.responseText;
updateButtonAppearance();
}
};
xhr.send();
}
function updateButtonAppearance() {
var currentText = toggleButton.innerText;
var newColor = currentText === 'Toggle OFF' ? 'green' : 'red';
toggleButton.style.backgroundColor = newColor;
toggleButton.innerText = currentText === 'Toggle OFF' ? 'Toggle ON' : 'Toggle OFF';
}
});
</script>
</body>
</html>
切换.php
<?php
session_start();
// Check if the toggle is set in the session, initialize if not set
if (!isset($_SESSION['toggle_status'])) {
$_SESSION['toggle_status'] = false;
}
// Toggle the status only when a POST request is received
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$_SESSION['toggle_status'] = !$_SESSION['toggle_status'];
}
// Return the current status
if ($_SESSION['toggle_status']) {
echo "Toggle is ON";
} else {
echo "Toggle is OFF";
}
?>
当您重新加载页面时，会话 cookie 仍会发送到服务器，因此当调用
isset($_SESSION['toggle_status'])这是你的问题，当你重新加载页面时，会话中的值可以设置为 true。因此，在执行 get 请求时，您应该将会话值设置为 False。
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$_SESSION['toggle_status'] = false;
}