ESP8266网页端数值如何发送至设备？技术求助

核心思路 #

网页端通过**HTTP请求（GET/POST）**将输入框数据发送到ESP8266的指定路由，ESP8266端的Web服务器监听该路由并解析参数。以下是针对你现有代码的具体修改方案：

1. HTML端修改（添加数据回传逻辑） #

假设你原有HTML包含数字输入框和提交按钮，添加JavaScript监听点击/回车事件，发起请求：

<!-- 原有输入框和按钮 -->
<input type="number" id="inputValue" placeholder="输入数值">
<button id="sendBtn">发送到ESP8266</button>

<script>
const input = document.getElementById('inputValue');
const sendBtn = document.getElementById('sendBtn');

// 发送数据的函数（GET请求，适合小数据）
function sendData(value) {
  // 替换成你的ESP8266局域网IP
  fetch(`http://192.168.4.1/setValue?val=${value}`)
    .then(response => response.text())
    .then(data => console.log('ESP响应:', data))
    .catch(error => console.error('发送失败:', error));
}

// 监听按钮点击
sendBtn.addEventListener('click', () => {
  const val = input.value.trim();
  if (val) sendData(val);
});

// 监听回车按键
input.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    const val = input.value.trim();
    if (val) sendData(val);
  }
});
</script>

若需使用POST请求（适合敏感/大数据），修改sendData函数：

function sendData(value) {
  fetch('http://192.168.4.1/setValue', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `val=${value}`
  })
  .then(response => response.text())
  .then(data => console.log('ESP响应:', data))
  .catch(error => console.error('发送失败:', error));
}

2. ESP8266端修改（添加路由处理） #

使用ESP8266WebServer库，添加对应路由接收并解析参数：

方法1：处理GET请求 #

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

ESP8266WebServer server(80);

// 处理/setValue路由的GET请求
void handleSetValue() {
  if (server.hasArg("val")) {
    String inputVal = server.arg("val");
    int numVal = inputVal.toInt(); // 转换为整数（按需调整）
    Serial.print("收到数值: ");
    Serial.println(numVal);
    
    // 此处添加数值处理逻辑（如控制GPIO、存储变量等）
    
    server.send(200, "text/plain", "已收到数值: " + inputVal);
  } else {
    server.send(400, "text/plain", "缺少val参数");
  }
}

void setup() {
  Serial.begin(115200);
  // 连接WiFi（保留你的原有代码）
  WiFi.begin("你的WiFi名称", "WiFi密码");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nWiFi已连接");
  Serial.println("ESP IP: " + WiFi.localIP().toString());

  // 注册路由
  server.on("/setValue", handleSetValue);
  // 保留你的原有网页路由（比如根路径"/"）
  server.on("/", [](){
    server.send(200, "text/html", 你的HTML内容字符串);
  });

  server.begin();
}

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

方法2：处理POST请求 #

若使用POST，修改路由注册和处理函数：

// 处理POST请求
void handleSetValuePost() {
  if (server.hasArg("val")) {
    String inputVal = server.arg("val");
    int numVal = inputVal.toInt();
    Serial.print("收到POST数值: ");
    Serial.println(numVal);
    
    server.send(200, "text/plain", "已收到POST数值: " + inputVal);
  } else {
    server.send(400, "text/plain", "缺少val参数");
  }
}

// 在setup()中注册POST路由
server.on("/setValue", HTTP_POST, handleSetValuePost);

调试要点 #

• 确保ESP8266与网页设备在同一局域网，网页中填写的ESP IP正确
• 打开浏览器控制台（F12）查看请求状态，排查发送报错
• 查看ESP8266串口输出，确认是否成功接收参数

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