嵌入式开发服务器与客户端交互
客户端 网页 操作 请求相关代码:
这里为了适配 低版本浏览器 用的不是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();
}
案例演示
按钮控制台信息
![](https://i-blog.csdnimg.cn/direct/a8b0cac9b81c4696bdaa3cd80ad9fb52.png)
单片机接收情况
![](https://i-blog.csdnimg.cn/direct/5f02e36e764642bba9b6e7aeff6bd34f.png)