ESP8266网页服务器文本框值读取及搭建优化问询

首先解决你当前的核心问题：点击Save按钮时获取三个时间输入框的值。你现在的代码里，Save按钮是通过<a>标签发起GET请求，但没有把输入框的数据带过去——因为输入框不在表单里，浏览器不会自动提交它们的值。我们需要先修改HTML结构，再在ESP8266端解析参数。

第一步：修改HTML输出，用表单包裹输入控件 #

把你的sResponse改成带<form>的结构，这样点击按钮时浏览器会自动把输入框的值作为请求参数发送：

sResponse = "<p><center><h1>ESP8266 Web Server</h1>"
            "<form method='GET' action='/'>"
            "<p>Time <input type='text' name='date_hh' size=2 autofocus> hh "
            "<input type='text' name='date_mm' size=2> mm "
            "<input type='text' name='date_ss' size=2> ss</p>"
            "<p><button type='submit' name='pin' value='FUNCTION1ON'>Save</button></p>"
            "</form></center>";
client.print(sResponse);

这里用了GET方法提交表单，所有输入值会拼在URL的?后面（比如/?pin=FUNCTION1ON&date_hh=12&date_mm=34&date_ss=56）。

第二步：在ESP8266端解析请求参数 #

如果是你当前用的基础WiFiClient方式，需要手动读取请求并提取参数：

// 假设你已经在处理客户端请求的代码块里
String request = client.readStringUntil('\r');
int paramPos = request.indexOf('?');
if (paramPos != -1) {
  String params = request.substring(paramPos + 1);
  
  // 解析date_hh
  String hh = extractParam(params, "date_hh");
  // 解析date_mm
  String mm = extractParam(params, "date_mm");
  // 解析date_ss
  String ss = extractParam(params, "date_ss");
  
  // 这里就可以使用这三个值了，比如打印到串口或者存储
  Serial.print("Received Time: ");
  Serial.print(hh); Serial.print(":"); Serial.print(mm); Serial.print(":"); Serial.println(ss);
}

// 封装一个参数提取的辅助函数
String extractParam(String params, String key) {
  int start = params.indexOf(key + "=");
  if (start == -1) return "";
  start += key.length() + 1;
  int end = params.indexOf('&', start);
  if (end == -1) end = params.length();
  return params.substring(start, end);
}

更优的网页服务器搭建方案 #

你当前的手动处理WiFiClient的方式比较底层，容易出错，推荐使用官方的ESP8266WebServer库——它封装了HTTP路由、参数解析、响应发送等功能，代码更简洁易维护。

示例代码（基于ESP8266WebServer） #

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

const char* ssid = "你的WiFi名称";
const char* password = "你的WiFi密码";

ESP8266WebServer server(80);

// 处理首页请求（显示表单）
void showForm() {
  String html = "<p><center><h1>ESP8266 Web Server</h1>"
                "<form method='GET' action='/'>"
                "<p>Time <input type='text' name='date_hh' size=2 autofocus> hh "
                "<input type='text' name='date_mm' size=2> mm "
                "<input type='text' name='date_ss' size=2> ss</p>"
                "<p><button type='submit' name='pin' value='FUNCTION1ON'>Save</button></p>"
                "</form></center>";
  server.send(200, "text/html", html);
}

// 处理Save按钮的提交请求
void handleSave() {
  // 检查参数是否齐全
  if (server.hasArg("date_hh") && server.hasArg("date_mm") && server.hasArg("date_ss")) {
    String hh = server.arg("date_hh");
    String mm = server.arg("date_mm");
    String ss = server.arg("date_ss");
    
    // 处理数据（这里只是示例，你可以改成存储到变量/EEPROM等）
    Serial.print("Saved Time: ");
    Serial.print(hh); Serial.print(":"); Serial.print(mm); Serial.print(":"); Serial.println(ss);
    
    // 返回成功提示页面
    server.send(200, "text/html", "<h1>Time Saved Successfully!</h1><p><a href='/'>Back to Form</a></p>");
  } else {
    // 参数不全时返回错误提示
    server.send(400, "text/html", "<h1>Error: Missing Time Parameters!</h1><p><a href='/'>Back to Form</a></p>");
  }
}

void setup() {
  Serial.begin(115200);
  // 连接WiFi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nWiFi Connected! IP: " + WiFi.localIP().toString());
  
  // 配置路由：GET请求到根路径时，判断是否有Save提交
  server.on("/", HTTP_GET, []() {
    if (server.hasArg("pin") && server.arg("pin") == "FUNCTION1ON") {
      handleSave();
    } else {
      showForm();
    }
  });
  
  server.begin();
  Serial.println("Web Server Started!");
}

void loop() {
  server.handleClient(); // 处理客户端请求
}

额外优化建议 #

1. 使用POST方法：如果不想让参数暴露在URL里，可以把表单的method改成POST，然后在服务器里配置server.on("/", HTTP_POST, handleSave);，参数解析方式不变，更适合处理敏感数据。
2. 前端验证：给输入框加上type="number"限制输入类型，或者用JavaScript做实时验证（比如限制输入0-23/0-59），避免无效数据提交。
3. AJAX异步提交：用JavaScript的fetch或XMLHttpRequest发送数据，不用刷新页面就能完成提交，提升用户体验。比如点击按钮时通过JS获取输入值，异步发送到服务器，然后更新页面提示。

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