Question

我创建了一个webUI来控制带有覆盆子pi的中继板。

按下按钮时，我使用AJAX请求访问relais.php。 relais.php将相应的命令发送到控制中继的python脚本。

<!DOCTYPE html>
<html>
<body>
  <label class="switch">
  <input type="checkbox" id="IN1" onclick="in1()">
  </label>
</body>

<script>
  function in1() {
    var x = document.getElementById("IN1").checked;
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "relais.php?dir=IN1=" + x, true);
    xhttp.send();
    var out1 = x; }
</script>
</html>

问题是页面重新加载，按钮被重置为＆＃34;未选中＆＃34;州。我如何在网络服务器上存储输入的状态？结果是我可以从另一个设备访问webUI，按钮将被记住＆＃34;每次我重装。

Answer 1

有两种方法可以保持页面的一致性（我可以想到这一点）。

您需要将状态存储在数据库和/或服务器会话中。
否则您可以将其存储在cookie中，并获取cookie内容，但可以删除和编辑cookie，因此它可能不是最佳解决方案。

示例PHP：

<?php

// Set the header
header("Content-Type: text/json");

/* 
 * Create a Mysql connection with PDO
 * http://php.net/manual/en/pdo.construct.php 
 */

// Prepare a query
$sth = $dbh->prepare("select col1, col2, col3 from fruit where user_id = ? limit 1");

// Execute the query, and replace the `?` with the value of `$_GET['key']`
$sth->execute([$_GET['key']]);

// Get the row
$reslut = $sth->fetch();

// print the result to the page
echo json_encode($reslut);

示例jQuery ajax：

// Make a request to the php file with the key `123456`.
// This could be a user id, hash or whatever you want it to be
// as long as it is in the database.
// this example is using it as a user id.
$.get('/path/to/phpfile.php?key=123456', result => {
    console.log(result);
});

Answer 2

问：我怎样才能让网页浏览器知道哪些按钮位于＆＃34;已检查＆＃34;状态和未选中的＃34;每次我加载网站？

答：如果你想＆＃34;保存状态＆＃34;对于特定的Web浏览器，请使用cookie。

如果您只是想要保存状态＆＃34;，您需要某种数据库＆＃34;在Web / PHP服务器上。

MySQL是一个不错的选择，但在你的情况下 ANYTHING 会起作用：包括像MongoDB noSQL数据库，甚至是简单的文本文件。

就个人而言，我更倾向于使用服务器端解决方案。但是这里有一个使用jQuery和cookie的例子 - 完全是浏览器端：

jQuery Toggle with Cookie

如何在网站上存储输入的状态？

2 个答案:

示例PHP：

示例jQuery ajax：