• 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();
        }
    
        ?>
    
  • 相关阅读:
    MySQL-事务原理
    MySQL-索引原理
    SQL-查询前N条记录
    Shell-配置libpath环境变量
    PG-Vacuum
    python连接mysql数据库
    Spark SQL 基本操作
    spark-shell 交互式编程
    Scala统计学生成绩
    Scala模拟图形绘制
  • 原文地址:https://www.cnblogs.com/chenfulin5/p/7778846.html
Copyright © 2020-2023  润新知