嵌入式开发服务器与客户端交互 日志2024/7/31

嵌入式开发服务器与客户端交互

客户端  网页 操作 请求相关代码:   

                                        这里为了适配 低版本浏览器 用的不是fetch

当然用fetch更好 

  var curUlr = window.location.href; //获取当前网页地址
  var newURL = curUlr.lastIndexOf("/");//截取到最后一个斜杠索引
  var pathUrl = curUlr.substring(0, newURL);//通过索引截取字符串地址
  var ledset = {}; //创建一个对象


   onclick = function (e) {  //检测按钮事件
            var butid = e.target.id;  //获取当前按钮ID
            console.log(butid);  //输出控制台
            if (butid.startsWith("g")) { //检车id是否为g开头
                if (ledset[butid] == 1) { //检测对象中 id对应的值是否是 1
                    e.target.checked = false; // input type="radio" 单选 取消
                    delete ledset[butid]; //清除这个键值对
                } else {

                    ledset[butid] = 1; //反之 添加键值对 id:1
                }


            }
            console.log(ledset); //控制台输出 对象
        };  



 function setLED() { //按钮函数 

            console.log("发送:" + JSON.stringify(ledset)); //控制台输出 JSON转化对象
          
            var Urll= pathUrl+"/setLED"; //拼接请求地址
            var xhr = new XMLHttpRequest(); //创建新的异步请求
            xhr.open("POST", Urll, true);   //设置请求格式 
            xhr.send(JSON.stringify(ledset)); //发送JSON数据

        };

单片机处理:  服务器库>>    <ESP8266WebServer.h>

关键处理代码 :

void setLed()
{
  Serial.println("处理上载数据中!"); 
// 打印一条消息，表示正在处理上传的数据

  if (ESP_server.hasArg("plain")) { 
// 检查HTTP请求中是否包含名为"plain"的参数

    String postData = ESP_server.arg("plain"); 
// 如果参数存在，获取其值并存储在String类型的postData变量中

    StaticJsonDocument<1024> doc; 

// 创建一个StaticJsonDocument对象，用于解析JSON数据。
   
// 分配1024字节空间 给JSON数据，


    DeserializationError error = deserializeJson(doc, postData); 

// 使用ArduinoJson库的deserializeJson函数尝试将postData字符串解析为JSON文档。
//如果解析过程中出现错误，error将包含错误信息


    Serial.println(postData); 
// 打印接收到的原始POST数据，确认数据是否正确接收

 ESP_server.send(200);

 //向客户端发送一个确认响应，表示数据已被接收且处理完了!
  }
}



void setup(){
 ESP_server.on("/setLED", HTTP_POST,setLed); 
}

void loop(){
ESP_server.handleClient();
}

案例演示

 按钮控制台信息

 单片机接收情况