PHP 之前后端交互

• 今天想实现一个很简单的功能，前端上面一个按键去控制 板子里面的一个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>

• gpio_operation.php 代码

    <?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();
    }

    ?>