javascript - 使用 AJAX 更改 CSS 样式且无需重新加载

Question

服务器发生故障后是否可以更改 CSS 元素的颜色？

在我的程序中，我单击一个按钮，然后 PHP 程序启动。该程序更改服务器中的值(Raspberry Pi GPIO 端口的值)。

在侧面加载后，我是否可以使用 PHP 更改 CSS 属性？如果我尝试 AJAX，它不会产生任何影响，因为站点已经加载，并且输出对站点没有影响。

<div id="output">  
  <script type='text/javascript'>
    var gpio_status = '0';
  </script>
</div>

<script type="text/javascript">
var php_output = document.getElementById("output");
var request;

function gpio_out(gpio_nr) {
  request = new XMLHttpRequest();
  request.open("post", "gpio_out.php", true);
  request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  request.send("daten=" + gpio_nr);
  request.onreadystatechange = request_status;

}

function request_status() {
  if (request.readyState == 4 && request.status == 200) {
    php_output.innerHTML = request.responseText;
  }
}
</script>

AJAX 文件的内容:

  $gpio_status = shell_exec("cat /sys/class/gpio/gpio" . $gpio_nr . "/value");

  echo "<script type='text/javascript'>";
    echo "var gpio_status = '$gpio_status';";
  echo "</script>";

最后我想要 JS 变量“gpio_status”。但它始终具有相同的值，即我在开始时给它的值:0。如果我 colsole.log() 变量，我总是得到 0。但我的其他代码工作正常。

Answer 1

PHP 是一种服务器端语言，这意味着(出于所有意图和目的)您用请求击中它并返回响应然后死亡。是的，如果您愿意重新加载页面并且愿意让 PHP 控制后端的某些状态，您可以更改元素的 CSS 样式。

If I try AJAX it has no impact because the site is already loaded, and the output has no effect on the site.

那么您的 AJAX 操作一定是错误的，因为 AJAX 的发明就是为了解决与您的问题完全相同的问题。