HTML复选框自动发送POST

Question

我试图在不添加提交按钮的情况下收集复选框数据。

这是我目前的代码：

          <!-- Web form -->
            <form class="switcher-form" method="post">
    <p class="setting-switch setting-switch-first">
     <label for="setting1">Controle Total</label>
     <!-- switcher checkbox #1 -->
     <input type="checkbox" class="switcher" checked name="setting1" value="1" onclick="submit();"/>
    </p>
    
    <p class="setting-switch">
     <label for="setting2">Controle Sala</label>
     <!-- switcher checkbox #2 -->
     <input type="checkbox" class="switcher" checked name="setting2" value="2" onclick="submit();"/>
    </p>

    <p class="setting-switch">
     <label for="setting3">Controle Quarto A</label>
     <!-- switcher checkbox #3 -->
     <input type="checkbox" class="switcher" checked name="setting3" value="3" onclick="submit();"/>
    </p>
    
    <p class="setting-switch">
     <label for="setting4">Controle Quarto B</label>
     <!-- switcher checkbox #4 -->
     <input type="checkbox" class="switcher" checked name="setting4" value="4" onclick="submit();"/>
    </p>
    
    <p class="setting-switch">
     <label for="setting5">Controle Cozinha</label>
     <!-- switcher checkbox #5 -->
     <input type="checkbox" class="switcher" checked name="setting5" value="5" onclick="submit();"/>
    </p>

    <p class="setting-switch">
     <label for="setting6">Controle Garagem</label>
     <!-- switcher checkbox #6 -->
     <input type="checkbox" class="switcher" checked name="setting6" value="6" onclick="submit();"/>
    </p>

    <p class="setting-switch">
     <label for="setting7">Controle Portao</label>
     <!-- switcher checkbox #7 -->
     <input type="checkbox" class="switcher" checked name="setting7" value="7" onclick="submit();"/>
    </p>

    <p class="setting-switch">
     <label for="setting8">Controle Refrigeracao</label>
     <!-- switcher checkbox #8 -->
     <input type="checkbox" class="switcher" checked name="setting8" value="8" onclick="submit();"/>
    </p>
            </form>
            <!-- End: Web form -->

是否可以使用 POST 或 GET 方法？自动发送复选框，例如：http://index.htm?setting1=0

我不太会CSS HTML JS，这段代码是在微控制器上运行。

Answer 1

听起来你想添加一个 onclick event to the checkbox, so that a Javascript function can contact the server in the background via an XMLHttpRequest，如下图所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
  </head>
  <body>
    <script>
"use strict"

function doAJAX()
{

  console.log("Contacting the server...");

  var xhr = new XMLHttpRequest();
  xhr.onload = function()
  {
    console.log("Got a response!");
  };
  xhr.open("get", "http://localhost:3000/something.png", true);
  xhr.responseType = "blob";
  xhr.send();

}
    </script>
    <input type="checkbox" onclick="doAJAX();">
  </body>
</html>

请记住，如果您 sending/receiving 到另一个域，则可能需要考虑 CORS。

Answer 2

这是解决此问题的重要信息：

http://startingelectronics.com/tutorials/arduino/ethernet-shield-web-server-tutorial/web-server-read-switch-automatically-using-AJAX/

HTML复选框自动发送POST

HTML Checkbox automatically send POST

html

methods

checkbox

post