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

    ?>