Question

提前道歉 - 我发现了一些似乎几乎可以解决这个问题的问题，但并没有把它拉到一起。我也不确定我是否从概念角度考虑这个问题。

我正在尝试创建一个HTML按钮，然后转到＆＃34;链接被触发但不会转到＆＃34;一个链接，意思是该链接的页面已加载。

背景：

我正在使用一些ESP8266板来通过网络界面打开和关闭。该主板托管一个简单的服务器并响应页面上的点击（从source修改）（它在板代码中保存为单个字符串，因此格式化古怪道歉）：

<style>  
.button{    
     background-color:red;    
     color:blue;    
     border-radius: 8px;    
     padding: 12px 24px;  
}
</style>
<h1>Simple NodeMCU Web Server</h1>
<p>    
  <a href=\"LEDOn\"><button class=\"button\">ON</button></a>    
  &nbsp;    
  <a href=\"LEDOff\"><button>OFF</button></a>
</p>

这很有效。任何时候我点击按钮加载＆＃34; LEDOn＆＃34;页面[IP_ADDRESS] / LEDOn加载并且LED亮起。

由于我有很多这样的小服务器正在运行，我希望有一个带有按钮的页面来控制所有这些服务器。问题是，如果我创建一个＆＃34; on＆＃34;远程板按钮：

<form action="http://[IP_ADDRESS]/LEDOn">

        <input type="submit" value="On" />
    </form>

远程LED亮起（好）但我也导航到/ LEDOn页面并远离我的主界面页面（坏）。我想在没有后者的情况下做前者。

在阅读之后，看起来AJAX可能是答案，但来自MDN tutorial的修改后的代码：

(function() {
  var httpRequest;
  document.getElementById("ajaxButton").addEventListener('click', makeRequest);

  function makeRequest() {
    httpRequest = new XMLHttpRequest();

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', 'http://IP_ADDRESS/LEDOn');
    httpRequest.send();
  }
  function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('There was a problem with the request.');
      }
    }
  }
  })();

似乎没有做任何事情。

我在这里走在正确的轨道上吗？如果是这样，我错过了什么？如果没有，是否有更好的方法来考虑这个问题？我正在寻找一种轻量级的方式来实现我的主要目标，而且我很高兴被告知我试图这样做是错误的。

谢谢！

HTML按钮，触发页面而不导航到该页面

0 个答案: