如何实现触发链接但不跳转页面的HTML按钮？ESP8266场景需求

嘿，我明白你要做什么——给ESP8266做个网页控制按钮，点了发指令但不跳页对吧？这在物联网网页控制里太常见了，我给你几个靠谱的方案，都是实测能用的：

这是目前最主流的方式，代码简洁，支持GET/POST请求，还能处理响应结果。

先写HTML按钮：

<button id="toggleOn">打开设备</button>
<button id="toggleOff">关闭设备</button>

然后加一段JavaScript，放在页面底部或者<script>标签里：

// 绑定打开按钮的点击事件
document.getElementById('toggleOn').addEventListener('click', function() {
  // 向ESP发送GET请求，路径是/on（你可以根据自己的ESP代码调整）
  fetch('/on')
    .then(response => {
      if (response.ok) {
        console.log('设备已打开');
        // 这里可以加一些用户反馈，比如按钮变色、显示提示文本
      } else {
        console.log('请求失败');
      }
    })
    .catch(error => console.error('请求出错:', error));
});

// 绑定关闭按钮的点击事件
document.getElementById('toggleOff').addEventListener('click', function() {
  fetch('/off')
    .then(response => {
      if (response.ok) {
        console.log('设备已关闭');
      } else {
        console.log('请求失败');
      }
    })
    .catch(error => console.error('请求出错:', error));
});

ESP8266端的Arduino代码示例（用WebServer库）：

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

ESP8266WebServer server(80);
const int devicePin = D1; // 假设你控制的设备接在D1引脚

void handleOn() {
  digitalWrite(devicePin, HIGH);
  server.send(200, "text/plain", "ON"); // 返回成功响应
}

void handleOff() {
  digitalWrite(devicePin, LOW);
  server.send(200, "text/plain", "OFF");
}

void setup() {
  pinMode(devicePin, OUTPUT);
  // 连接WiFi的代码...
  server.on("/on", handleOn);
  server.on("/off", handleOff);
  server.begin();
}

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

如果你不想写太多事件绑定，用表单也可以，关键是阻止表单的默认跳转行为：

<form id="onForm" action="/on" method="GET">
  <button type="submit">打开设备</button>
</form>

<form id="offForm" action="/off" method="GET">
  <button type="submit">关闭设备</button>
</form>

<script>
// 阻止表单跳转
document.getElementById('onForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 关键：阻止默认的页面跳转
  fetch(this.action); // 发送请求
});

document.getElementById('offForm').addEventListener('submit', function(e) {
  e.preventDefault();
  fetch(this.action);
});
</script>

如果不想写JavaScript，可以用隐藏的<img>标签来发送请求——浏览器加载图片资源不会跳转页面，非常适合初期调试：

<button onclick="document.getElementById('cmdImg').src='/on'">打开设备</button>
<button onclick="document.getElementById('cmdImg').src='/off'">关闭设备</button>
<!-- 隐藏的图片标签，用来发送请求 -->
<img id="cmdImg" style="display: none;" />

这个方法的缺点是没法知道请求是否成功，但胜在简单，适合快速验证功能。

• 确保ESP8266的WebServer正确处理你发送的路径（比如/on、/off），返回200状态码。
• 如果需要发送更多数据（比如自定义参数），可以用Fetch的POST方法，ESP端对应处理POST请求即可。
• 可以给按钮加点击反馈，比如点击后临时禁用按钮、显示加载状态，提升用户体验。

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