Question

我已经用esp8266的html和css编写了一个web服务器。我在Web服务器中有一些按钮，我在代码中使用了get方法。在arduino我说，当它看到我的按钮的名称，打印okk。就在这里：

＆＃13;

if(str.IndexOf("Turn+On")>0)
{
    cilent.print("Okkk"}
}

＆＃13;

但是每当我刷新浏览器并且每次推送所有的buttob时，Web服务器都会发送给我。但我想在一个特定的按钮上设置命令而不是全部。

我的意思是每个Button都有自己的命令。我的HTML代码在这里：

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                font-family: "Lato", sans-serif;
            }
            /* Style the tab */
            div.tab {
                overflow: hidden;
                border: 1px solid #ccc;
                background-color: #f1f1f1;
            }
            /* Style the buttons inside the tab */            
            div.tab button {
                background-color: inherit;
                float: left;
                border: none;
                outline: none;
                cursor: pointer;
                padding: 14px 16px;
                transition: 0.3s;
                font-size: 17px;
            }
            /* Change background color of buttons on hover */            
            div.tab button:hover {
                background-color: #ddd;
            }
            /* Create an active/current tablink class */            
            div.tab button.active {
                background-color: #ccc;
            }
            /* Style the tab content */            
           .tabcontent {
               display: none;
               padding: 6px 12px;
               border: 1px solid #000000;
               border-top: none;
           }            
           .button {
               position: relative;
               background-color: #C0C0C0;
               border: none;
               font-size: 28px;
               color: #FFFFFF;
               padding: 20px;
               width: 200px;
               text-align: center;
              -webkit-transition-duration: 0.4s;
              /* Safari */
              transition-duration: 0.4s;
              text-decoration: none;
              overflow: hidden;
              cursor: pointer;
          }            
          .button:after {
              content: "";
              background: #90EE90;
              display: block;
              position: absolute;
              padding-top: 300%;
              padding-left: 350%;
              margin-left: -20px!important;
              margin-top: -120%;
              opacity: 0;
              transition: all 0.8s
          }            
          .button:active:after {
              padding: 0;
              margin: 0;
              opacity: 1;
              transition: 0s
          }
        
          body,
          html {
              height: 100%;
              margin: 0;
          }
        
          .bg {
          /* The image used */
              background-image: url("http://free4kwallpaper.com/wp-content/uploads/2016/01/New-Age-4K-Abstract-Wallpapers.jpg");
          /* Full height */
              height: 100%;
          /* Center and scale the image nicely */
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
          }
      </style>
  </head>
  <body>
      <div class="tab bg">
          <button class="tablinks" onclick="Tools(event, 'Lights')">Lights</button>
          <button class="tablinks" onclick="Tools(event, 'Digital')">Digital</button>
          <button class="tablinks" onclick="Tools(event, 'Kitchen')">Kitchen</button>
      </div>

      <div id="Lights" class="tabcontent bg">
          <div class="tab">
              <button class="tablinks" onclick="Tools(event, 'Bedroom1')">Bedroom1</button>
          </div>
          <div class="tab">
              <button class="tablinks" onclick="Tools(event, 'Bedroom2')">Bedroom2</button>
          </div>       
          <div class="tab">
              <button class="tablinks" onclick="Tools(event, 'Hall')">Hall</button>
          </div>

          <div class="tab">
              <button class="tablinks" onclick="Tools(event, 'Kitchen1')">Kitchen1</button>
          </div>
      </div>
      <div id="Bedroom1" class="tabcontent bg">
          <form>
              Turn On:<br>
              <input class="button" type="submit" name="Turn On" value="B1Turn On">
              <br> Turn Off:<br>
              <input class="button" type="submit" name="Turn Off" value="B1Turn Off">
          </form>
      </div>
      <div id="Bedroom2" class="tabcontent bg">
          <form>
              Turn On:<br>
              <input class="button" type="submit" name="Turn On" value="B2Turn On">
              <br> Turn Off:<br>
              <input class="button" type="submit" name="Turn Off" value="B2Turn Off">
          </form>
      </div>
      
      <div id="Hall" class="tabcontent bg">
          <form>
              Turn On:<br>
              <input class="button" type="submit" name="Turn On" value="HTurn On">
              <br> Turn Off:<br>
              <input class="button" type="submit" name="Turn Off" value="HTurn Off">
          </form>
      </div>
      
      <div id="Kitchen1" class="tabcontent bg">
          <form>
              Turn On:<br>
              <input class="button" type="submit" name="Turn On" value="KTurn On">
              <br> Turn Off:<br>
              <input class="button" type="submit" name="Turn Off" value="KTurn Off">
          </form>
      </div>

      <div id="Digital" class="tabcontent bg">
          <div class="tab">
              <button class="tablinks" onclick="Tools(event, 'TV')">TV</button>
          </div>
          <div class="tab">
              <button class="tablinks" onclick="Tools(event, 'Splitter')">Splitter</button>
          </div>
      </div>
      <div id="TV" class="tabcontent bg">
          <form>
              Turn On:<br>
              <input class="button" type="submit" name="Turn On" value="TTurn On">
              <br> Turn Off:<br>
              <input class="button" type="submit" name="Turn Off" value="TTurn Off">
          </form>
      </div>
      <div id="Splitter" class="tabcontent bg">
          <form>
              Turn On:<br>
              <input class="button" type="submit" name="Turn On" value="STurn On">
              <br> Turn Off:<br>
              <input class="button" type="submit" name="Turn Off" value="STurn Off">
          </form>
      </div>
      
      <div id="Kitchen" class="tabcontent bg">
          <div class="tab">
              <button class="tablinks" onclick="Tools(event, 'Microvawe')">Microvawe</button>
          </div>

          <div class="tab">
              <button class="tablinks" onclick="Tools(event, 'Refrigerator')">Refrigerator</button>
          </div>
      </div>
      <div id="Microvawe" class="tabcontent bg">
          <form>
              Turn On:<br>
              <input class="button" type="submit" name="Turn On" value="MTurn On">
              <br> Turn Off:<br>
              <input class="button" type="submit" name="Turn Off" value="MTurn Off">
          </form>
      </div>
      <div id="Refrigerator" class="tabcontent bg">
          <form>
              Turn On:<br>
              <input class="button" type="submit" name="Turn On" value="RTurn On">
              <br> Turn Off:<br>
              <input class="button" type="submit" name="Turn Off" value="RTurn Off">
          </form>
      </div>
      
      <script>
          function Tools(evt, cityName) {
              var i, tabcontent, tablinks;
              tabcontent = document.getElementsByClassName("tabcontent");
              for (i = 0; i < tabcontent.length; i++) {
                  tabcontent[i].style.display = "none";
              }
              tablinks = document.getElementsByClassName("tablinks");
              for (i = 0; i < tablinks.length; i++) {
                  tablinks[i].className = tablinks[i].className.replace(" active", "");
              }
              document.getElementById(cityName).style.display = "block";
              evt.currentTarget.className += " active";
          }
      </script>

  </body>

  </html>

＆＃13;

Answer 1

您可以向这样的表单添加操作：

<form action="/url/goes/here">

以下是使用此更改时前两个按钮的外观

<div id="Bedroom1" class="tabcontent bg">
    <form action="/bedroom1">
        Turn On:<br>
        <input class="button" type="submit" name="Turn On" value="B1Turn On">
        <br> Turn Off:<br>
        <input class="button" type="submit" name="Turn Off" value="B1Turn Off">
    </form>
</div>

<div id="Bedroom2" class="tabcontent bg">
    <form action="/bedroom2">
        Turn On:<br>
        <input class="button" type="submit" name="Turn On" value="B2Turn On">
        <br> Turn Off:<br>
        <input class="button" type="submit" name="Turn Off" value="B2Turn Off">
    </form>
</div>

现在，在您的esp8266服务器代码上，您需要检查每个HTTP请求的路径，以确定按下了哪个按钮。

让我们说你点击卧室1的“开启”按钮。网页浏览器通过这样做来回应：

POST /bedroom1 HTTP/1.1
... some HTTP headers will follow

Turn+On=B1Turn+On

解析路径（上例中的/bedroom1）是你的工作。快乐的编码！

以HTML格式获取方法

1 个答案: