如何将Arduino变量传递给前端JS变量并用于更新网页内容

你遇到的问题本质是Arduino的变量运行在开发板本地环境，直接把变量名写在输出的HTML/JS字符串中时，浏览器只会将其识别为JavaScript环境的变量，不会自动替换为Arduino侧的实际数值。

方案1：直接拼接变量值到输出内容 #

将Arduino侧的sensorData变量转为字符串后，拼入你要输出的JS代码段即可，修改写法如下：

// 把sensorData的实际值拼入JS变量定义
client.println("<script> var dat = " + String(sensorData) + ";</script>");

后续你的DOM更新、标题更新逻辑都可以直接用dat变量：

// 更新DOM显示
client.println("document.getElementById(\"sensorData\").innerHTML = dat;");
// 额外补充：更新网页标题的写法
client.println("document.title = '当前传感器值：' + dat;");

方案2：直接替换DOM占位符 #

你之前用到的%SENSORDATA%占位符思路也可以直接实现，不需要额外定义JS变量：

// 直接把传感器值替换到h1标签内容中
client.println("<h1 id=\"sensorData\">" + String(sensorData) + "</h1>");

完整参考代码示例 #

// 处理客户端请求的核心逻辑示例
void handleClientRequest() {
  WiFiClient client = server.available();
  if (!client) return;

  // 等待客户端发送请求完成
  while(client.connected() && !client.available()) delay(1);

  // 读取传感器数值
  int sensorData = analogRead(sensorPin);

  // 输出HTTP响应头
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println("Connection: close");
  client.println();

  // 输出网页内容
  client.println("<html>");
  client.println("<body>");
  // 拼入传感器变量的JS定义
  client.println("<script>let sensorVal = " + String(sensorData) + ";</script>");
  client.println("<h1 id=\"showData\"></h1>");
  client.println("<script>");
  // 更新页面显示
  client.println("document.getElementById('showData').innerText = '传感器读数：' + sensorVal;");
  // 更新网页标题
  client.println("document.title = '传感器读数：' + sensorVal;");
  client.println("</script>");
  client.println("</body>");
  client.println("</html>");

  // 关闭连接
  client.stop();
}

注意事项 #

如果后续你需要传递字符串类型的变量到JS，拼接时需要额外给值加上双引号，避免JS语法报错：

String strVal = "测试数据";
client.println("<script>let strDat = \"" + strVal + "\";</script>");

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