ESP32网页服务器XHR发送串口消息：避免编码与冗余内容

问题根源 #

你之前的XMLHttpRequest调用完全不符合API规范：xhr.open(encodeURIComponent(message), true);把编码后的消息当成了HTTP请求方法，true被当作URL的一部分，这才导致串口输出出现%3B（分号的URI编码）和多余的/true HTTP/1.1内容。

解决方案 #

我们需要修正JS的请求逻辑，同时在ESP32端对应处理请求，直接获取纯文本消息。

1. 修改前端JS函数

将原来错误的XHR调用改为标准的POST请求，直接发送纯文本消息：

function sendMessage() {
  let mode;
  if (document.getElementById('radioMode1').checked) {
    mode = "mode1";
  } else if (document.getElementById('radioMode2').checked) {
    mode = "mode2";
  } else if (document.getElementById('radioMode3').checked) {
    mode = "mode3";
  } else if (document.getElementById('radioMode4').checked) {
    mode = "mode4";
  }
  const sep = ";";
  const message = mode + sep + document.getElementById('schaltzahlen').value + sep + document.getElementById('frequenz').value;
  
  const xhr = new XMLHttpRequest();
  // 指定POST方法，请求ESP32的/send路径
  xhr.open("POST", "/send", true);
  // 告诉服务器发送的是纯文本，避免编码
  xhr.setRequestHeader("Content-Type", "text/plain");
  // 直接发送原始消息
  xhr.send(message);
}

2. ESP32端添加请求处理逻辑

在你的ESP32代码中，添加处理/send路径POST请求的函数，读取请求体内容并输出到串口：

#include <WiFi.h>
#include <WebServer.h>

WebServer server(80);

// 处理/send路径的POST请求
void handleSendRequest() {
  if (server.method() == HTTP_POST) {
    // 读取请求体中的纯文本内容
    String serialMsg = server.arg("plain");
    // 输出到串口
    Serial.println(serialMsg);
    // 返回成功响应
    server.send(200, "text/plain", "OK");
  } else {
    // 拒绝非POST请求
    server.send(405, "text/plain", "Method Not Allowed");
  }
}

void setup() {
  Serial.begin(115200);
  // 这里添加你的WiFi连接代码...
  
  // 注册/send路径的处理函数
  server.on("/send", handleSendRequest);
  // 注册你的根路径网页处理函数（原来的网页代码）...
  
  server.begin();
}

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

效果 #

修改完成后，点击网页按钮时，串口会输出纯原始消息，比如：

mode1;25800;2.5

不会再出现URI编码和多余的HTTP请求内容。

内容的提问来源于stack exchange，提问作者nikolatdr