-
今天想实现一个很简单的功能,前端上面一个按键去控制 板子里面的一个LED灯,就这么一个简单的问题,困扰了一天。
-
以前搞底层的时候,没有服务端和客户端的深刻概念,网页不同,分在客户端运行的 html 代码,以及在服务端运行php, 等代码。
-
这里面涉及前后端交互的一个概念。
-
今天大致记录这个功能是怎么实现的。
-
这是前端显示代码
<h2 id="hardware-operation">Hardware Operation</h2>
<script>
function gpio_on()
{
var str="GPIO29_ON";
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行的代码
xmlhttp=new XMLHttpRequest();
}
else
{
//IE6, IE5 浏览器执行的代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gpio_operation.php?q="+str, true);
xmlhttp.send();
}
function gpio_off()
{
var str="GPIO29_OFF";
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行的代码
xmlhttp=new XMLHttpRequest();
}
else
{
//IE6, IE5 浏览器执行的代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gpio_operation.php?q="+str, true); // 这里的 q 是传入的参数
xmlhttp.send();
}
</script>
<div>
<style>
td {
text-align: center;
}
</style>
<table width="100%" border="1" align="center" >
<tr>
<th scope="col">Index</th>
<th scope="col">Name</th>
<th scope="col">ON</th>
<th scope="col">OFF</th>
</tr>
<?php
foreach ($MiniOS->configs["hardware_operation"] as $key => $value) {
echo "<tr>";
echo "<th socpe='row'>".$value["index"]."</th>";
echo "<td>".$key."</td>";
echo "<td>";
echo '<button onclick="gpio_on()">'.'gpio_on'.'</button>'; // 按钮,调用 gpio_on()
echo "</td>";
echo "<td>";
echo '<button onclick="gpio_off()">'.'gpio_off'.'</button>'; // 按钮, 调用 gpio_off
echo "</td>";
echo "</tr>";
}
?>
</table>
<div>
<?php
// 获取传入的参数
$q=$_GET["q"];
function gpio29_on()
{
$cmd1 = "echo 29 > /sys/class/gpio/export";
$cmd2 = "echo out > /sys/class/gpio/gpio29/direction";
$cmd3 = "echo 1 > /sys/class/gpio/gpio29/value ";
exec($cmd1);
exec($cmd2);
exec($cmd3);
}
function gpio29_off()
{
$cmd1 = "echo 0 > /sys/class/gpio/gpio29/value ";
$cmd2 = "echo 29 > /sys/class/gpio/unexport";
exec($cmd1);
exec($cmd2);
}
if ($q == "GPIO29_ON")
{
gpio29_on();
}
else if ($q == "GPIO29_OFF")
{
gpio29_off();
}
?>