ESP8266前端控制的几种方式

最新推荐文章于 2024-03-18 20:29:02 发布

Kearney form An idea

最新推荐文章于 2024-03-18 20:29:02 发布

阅读量752

点赞数 1

分类专栏： Node MCU 文章标签：单片机 nodemcu

本文链接：https://blog.csdn.net/weixin_43031092/article/details/106886540

版权

Node MCU 专栏收录该内容

46 篇文章 16 订阅

订阅专栏

原理

ESP8266 AP模式下的控制都是由server.on();来响应的
比如server.on("/", handleRoot);就是说当有客户端请求访问网站根目录，就调用handleRoot方法去响应请求

超链接

a标签实现的页面跳转，点击 Change LED 之后跳转到LED页面，但是这个页面其实不算是网页代码，只是执行某种请求之后然后在返回主页，然后重复载入整个主页

void handleLed(){
    digitalWrite(D6,!digitalRead(D6));  
    server.sendHeader("Location","/");	//跳转到网站根目录，如果没有当前就会404
    server.send(303);
}

void handleRoot() {
    server.send(200, "text/html", "<br><br><br> <a href='/LED' >Change LED</a>");
}

 server.on("/LED", HTTP_POST,handleLed);
//https://blog.csdn.net/weixin_43031092/article/details/106794102

表单

表单其实就是输入数据提交之后跳转后另一个网页，也就是访问网站下的某个文件，然后实现定义好的server.on("/LED", HTTP_POST,handleLed); 就会响应，如果不需要数据只有按钮，就保留按钮即可，但是这样子会有一个问题就是本质上是页面跳转，还是会存在重复刷新整个主页的问题

void handleRoot() {
    server.send(200, "text/html", "<br><br><br><form action=\"/LED\" method=\"POST\" style='text-align: center;'><input type=\"submit\" value=\"Change LED\"></form>");
}
//https://blog.csdn.net/weixin_43031092/article/details/106794102

js-location

这个js案例展示的是js实现页面跳转，其实存在的问题和上面一样

String sendHTML (){
  String htmlCode = "<script>function goTo(i){ if(i == 0)  {location='stop';}  else if(i == 1)  {location='left';}  else if (i == 2)  {location='right';}  else  {location='ahead';} }</script>";
  htmlCode = htmlCode + "<style>";
  htmlCode = htmlCode + ".btn{    text-align: center;    text-decoration: none; border: none;  font-size: 100px;}";
  htmlCode = htmlCode + "#btnAhead{ height: 35%;  width: 100%;    background-color: antiquewhite;}";
  htmlCode = htmlCode + "#btnLeft{ float: left;  height: 40%;  width: 50%;  background-color: cornflowerblue;}";
  htmlCode = htmlCode + "#btnRight{ float: right;  height: 40%;  width: 50%;  background-color: darkseagreen;}";
  htmlCode = htmlCode + "#btnStop{ height: 25%;  width: 100%;  background-color: orangered;}";  
  htmlCode = htmlCode + "</style>";
  htmlCode = htmlCode + "<body >";
  htmlCode = htmlCode + "<button type='button' class='btn' id='btnAhead' οnclick='goTo()'>Ahead</button>";
  htmlCode = htmlCode + "<br> <button type='button' class='btn' id='btnLeft' οnclick='goTo(1)'>Left</button>";    
  htmlCode = htmlCode + "<button type='button' class='btn' id='btnRight' οnclick='goTo(2)'>Right</button>";    
  htmlCode = htmlCode + "<button type='button' class='btn' id='btnStop' οnclick='goTo(0)'>Stop</button>";  
  htmlCode = htmlCode + "</body>";  
  return htmlCode;
}

void handleRoot() {
  WebServer.send(200, "text/html",sendHTML());
}

WebServer.on("/ahead", handleAhead); 

void handleAhead(){
    digitalWrite(DcMottoLeft,1);  
    digitalWrite(DcMottoRight,1);  
    WebServer.sendHeader("Location","/");
    WebServer.send(303);
}

8266可以将前端文件代码全部存储在flash中的。。这里只是为了这么展示看的更清楚，不然前端代码多了放在arduino.ino不利于代码阅读

js-XMLHttpRequest

XMLHttpRequest这玩意可不得了，可以在后台进行数据首发，简单的说就是不用再全部重新加载整个网页了，但是我在用8266进行这么做的时候，发现一个问题，就是不知道为什么会多次传输数据。。。。但是大佬和教程都显示这XMLHttpRequest的send就发送一次。。。迷
在这里插入图片描述

  WebServer.on("/", handleRoot);  
  WebServer.on("/setMotor", handleMotor); 
String sendHTML(){
   String htmlCode = "<script> function sendData(i){var xhttp = new XMLHttpRequest(); xhttp.open('GET', 'setMotor?MotorState='+i, true);  xhttp.send();}</script>";
  htmlCode = htmlCode + "<style>";
  htmlCode = htmlCode + ".btn{    text-align: center;    text-decoration: none; border: none;  font-size: 100px;}";
  htmlCode = htmlCode + "#btnAhead{ height: 35%;  width: 100%;    background-color: antiquewhite;}";
  htmlCode = htmlCode + "#btnLeft{ float: left;  height: 40%;  width: 50%;  background-color: cornflowerblue;}";
  htmlCode = htmlCode + "#btnRight{ float: right;  height: 40%;  width: 50%;  background-color: darkseagreen;}";
  htmlCode = htmlCode + "#btnStop{ height: 25%;  width: 100%;  background-color: orangered;}";  
  htmlCode = htmlCode + "</style>";
  htmlCode = htmlCode + "<body >";
  htmlCode = htmlCode + "<button type='button' class='btn' id='btnAhead' οnclick='sendData(3)'>Ahead</button>";
  htmlCode = htmlCode + "<br> <button type='button' class='btn' id='btnLeft' οnclick='sendData(1)'>Left</button>";    
  htmlCode = htmlCode + "<button type='button' class='btn' id='btnRight' οnclick='sendData(2)'>Right</button>";    
  htmlCode = htmlCode + "<button type='button' class='btn' id='btnStop' οnclick='sendData(0)'>Stop</button>";  
  htmlCode = htmlCode + "</body>";  
  return htmlCode;
}
void handleRoot(){
  Serial.println("index!");
  WebServer.send(200, "text/html", sendHTML());
}

void  handleMotor(){

  String MotorState = WebServer.arg("MotorState"); 
  Serial.println(MotorState);
  if(MotorState == "0"){
    digitalWrite(DcMottoLeft,0);  
    digitalWrite(DcMottoRight,0); 
    Serial.println("0");
  }
  else if(MotorState == "1"){ //Left
    digitalWrite(DcMottoLeft,0);  
    digitalWrite(DcMottoRight,1); 
  }
  else if(MotorState == "2"){ //Right
    digitalWrite(DcMottoLeft,1);  
    digitalWrite(DcMottoRight,0); 
  }
  else if(MotorState == "3"){ //Ahead
    digitalWrite(DcMottoLeft,1);  
    digitalWrite(DcMottoRight,1); 
  }
  else {                       //Ahead
     Serial.print("Unknown state: ");
    Serial.println(MotorState);
  }
}

XMLHttpRequest解决办法参考

emm看了一下蛮复杂的。。我还是用第一个吧。。。

https://zhuanlan.zhihu.com/p/112985315
https://blog.csdn.net/huangzhenkun94/article/details/77847671

Kearney form An idea

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
ESP8266前端控制的几种方式

原理ESP8266 AP模式下的控制都是由server.on();来响应的比如server.on("/", handleRoot);就是说当有客户端请求访问网站根目录，就调用handleRoot方法去响应请求超链接a标签实现的页面跳转，点击 Change LED 之后跳转到LED页面，但是这个页面其实不算是网页代码，只是执行某种请求之后然后在返回主页，然后重复载入整个主页void handleLed(){ digitalWrite(D6,!digitalRead(D6)); s
复制链接

扫一扫

专栏目录