Question

这是一个很难问的问题，因为我不知道我想做什么是可能的，是不是代码会做什么。

我有一个Arduino运行一个可以控制8个继电器的Web服务器。

要打开和关闭继电器，我会使用。

http://192.168.1.178/?led1=on

我想创建一个具有开启和关闭按钮的HTML页面。

到目前为止，当我按下上面的链接时，我尝试的所有内容都会从Arduino上运行的Web服务器加载一个页面。但我希望保留在我的自定义HTML页面上，而不是将该页面打开。

所以基本上我希望链接发送请求但不要拉页面。这可能吗？

我的代码是：

<form  method="get">   
  <p>Led controller</p> 
  <br>led1 <input type="button" name="led1" value="on"> 
  <br>led2 <input type="submit" name="led2" value="on"> 
  <br>led3 <input type="submit" name="led3" value="on"> 
  <br>led4 <input type="submit" name="led4" value="on"> 
  <br>led5 <input type="submit" name="led5" value="on"> 
  <br>led6 <input type="submit" name="led6" value="on"> 
  <br>led7 <input type="submit" name="led7" value="on"> 
  <br>led8 <input type="submit" name="led8" value="on"> 
  <br>All 
  <input type="submit" name="all" value="on"><input type="submit" name="all" value="off"> 
</form>

Answer 1

基于Using XMLHttpRequest的示例，您可以定义基本的AJAX请求，并执行类似

的操作

＆＃13;

var device = "http://192.168.1.178/";

function reqListener() {
  console.log(this.responseText);
}

function setLed(i, state) {
  if (state === undefined || state !== 'on') state = 'off';
  var oReq = new XMLHttpRequest();
  oReq.addEventListener("load", reqListener);
  if (i === 'all') {
    oReq.open("GET", device + "?all=" + state);
  } else {
    oReq.open("GET", device + "?led" + i + "=" + state);
  }
  oReq.send();
}

＆＃13;

<form>
  <input type="button" value="Turn Led 1 On" onClick="setLed(1,'on')" />
  <input type="button" value="Turn Led 1 Off" onClick="setLed(1,'off')" />
  <br/>
  <input type="button" value="Turn Led 2 On" onClick="setLed(2,'on')" />
  <input type="button" value="Turn Led 2 Off" onClick="setLed(2,'off')" />
  <br/>
  <hr /><br/>
  <input type="button" value="Turn All On" onClick="setLed('all','on')" />
  <input type="button" value="Turn All Off" onClick="setLed('all','off')" />
  <br/>
</form>

＆＃13;

但是，除非您在Arduino上运行此操作，否则您需要启用Cross-origin resource sharing。

我希望链接发送请求但不要拉页面。那可能吗？

1 个答案: