我是一个新手，正在努力解决这个问题，我认为问题可能出在toggle.php文件上。我所使用的这段代码大部分情况下可以正常工作，但是当页面手动刷新时，如果切换状态为ON，则按钮的状态会混淆，显示为OFF状态。PHP似乎没有重置，仍然保持在ON状态。我已经尝试修改了一些内容，但还是找不到逻辑错误。
fetchToggleStatus函数是由ChatGPT建议添加的，并带来了一定帮助，也许可以考虑删除它。
toggle_button.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>带有AJAX和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');
// 页面加载时获取初始切换状态
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>
toggle.php
<?php
session_start();
// 检查session中是否存在切换状态，如果没有设置则初始化
if (!isset($_SESSION['toggle_status'])) {
$_SESSION['toggle_status'] = false;
}
// 只有接收到POST请求时才切换状态
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$_SESSION['toggle_status'] = !$_SESSION['toggle_status'];
}
// 返回当前状态
if ($_SESSION['toggle_status']) {
echo "Toggle is ON";
} else {
echo "Toggle is OFF";
}
?>