通过 href 方法将复选框的值发送到 control.php 文件

Question

我的网络摄像头有一个 control.php 文件，我可以通过使用图像映射的 href 链接向它发送命令，如下所示： href="command.php?cmd=1"。在 control.php 中有一个睡眠定时器，它会在 1 秒后停止相机的移动。一切正常。现在，我想在网络摄像头流媒体页面中添加一个复选框，并且除了命令之外，还希望将复选框的值发送到 command.php。取决于复选框的值，它会在一秒钟后停止凸轮的移动或不停止移动。我在 php 甚至 JS 中都尝试过，但我太愚蠢了，无法完成。非常感谢任何帮助！干杯，福尔克

Answer 1

您可以在复选框上使用 javascript 事件 onclick() 并对第二个 PHP 脚本进行 AJAX 调用。使用this，您可以将复选框对象及其数据作为参数传递。

<input type='checkbox' onclick='moveCamera(this);'>

<script>
    function moveCamera(checkbox) {
       var http = new XMLHttpRequest();
       var url = 'command.php';
       var params = 'cmd=1&checked=' + checkbox.checked;

       http.open('POST', url, true);
       http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
       http.onreadystatechange = function() {
           if(http.readyState == 4 && http.status == 200) {
           // Here you can put code that will be executed after the call is complete
           }
       }
       http.send(params)
    }
</script>

现在您可以像在第二个 php 脚本中访问 cmd 一样访问 checked。

Answer 2

非常感谢克里斯托珀！也许我不够精确，我无法做到。这就是现在运行良好的方法：

<center><h3 class="auto-style21">Camera Control 
<input type="checkbox" id="myCheck" onclick="myFunction()" checked="checked"> AutoStop aktiviert: <i id="demo"></i></h3>

<script>
function myFunction() {
var x = document.getElementById("myCheck").checked;
document.getElementById("demo").innerHTML = x;
}
</script>

但现在，我想发送 x 值而不是发送 auto=true 或 false，请参见下文：

<map name="image-map">
<img src="ptz.jpg" usemap="#image-map">
<area alt="Up" title="Up" target="control" coords="127,31,25" shape="circ" 
href="control.php?cmd=0&auto=false">
<area alt="Down" title="Down" target="control" coords="127,170,30" shape="circ" 
href="control.php?cmd=2&auto=false">
<area alt="Left" title="Left" target="control" coords="39,93,30" shape="circ" 
href="control.php?cmd=4&auto=false">
<area alt="Right" title="Right" target="control" coords="217,93,25" shape="circ" 
href="control.php?cmd=6&auto=false">
<area alt="UpRight" title="UpRight" target="control" coords="181,49,22" 
shape="circ" href="control.php?cmd=91&auto=true">
<area alt="UpLeft" title="UpLeft" target="control" coords="71,49,22" 
shape="circ" href="control.php?cmd=90&auto=true">
<area alt="DownLeft" title="DownLeft" target="control" coords="63,144,22" 
shape="circ" href="control.php?cmd=92&auto=true">
<area alt="DownRight" title="DownRight" target="control" coords="188,144,22" 
shape="circ" href="control.php?cmd=93&auto=true">
<area alt="Stop" title="Stop" target="control" coords="126,95,46" shape="circ" 
href="control.php?cmd=1&auto=true">
</map>
</center>

我尝试了 document.write，但同样，我对疯狂的语法太愚蠢了。 document.getElementById --> InnerHTML 工作正常，这是现在的解决方案，以防万一有人好奇：

<script>
function myFunction() {
var x = document.getElementById("myCheck").checked;
document.getElementById("demo").innerHTML = x;
var up = "<area alt=\"Up\" title=\"Up\" target=\"control\" 
coords=\"127,31,25\" shape=\"circ\" href=\"control.php?cmd=0&auto=";
var down = "<area alt=\"Down\" title=\"Down\" target=\"control\" 
coords=\"127,170,30\" shape=\"circ\" href=\"control.php?cmd=2&auto=";
var left = "<area alt=\"Left\" title=\"Left\" target=\"control\" 
coords=\"39,93,30\" shape=\"circ\" href=\"control.php?cmd=4&auto=";
var right= "<area alt=\"Right\" title=\"Right\" target=\"control\" 
coords=\"217,93,25\" shape=\"circ\" href=\"control.php?cmd=6&auto=";
var upright = "<area alt=\"UpRight\" title=\"UpRight\" target=\"control\" 
coords=\"181,49,22\" shape=\"circ\" href=\"control.php?cmd=91&auto=";
var upleft = "<area alt=\"UpLeft\" title=\"UpLeft\" target=\"control\" 
coords=\"71,49,22\" shape=\"circ\" href=\"control.php?cmd=90&auto=";
var downleft = "<area alt=\"DownLeft\" title=\"DownLeft\" target=\"control\" 
coords=\"63,144,22\" shape=\"circ\" href=\"control.php?cmd=92&auto=";
var downright= "<area alt=\"DownRight\" title=\"DownRight\" 
target=\"control\" coords=\"188,144,22\" shape=\"circ\" href=\"control.php? 
cmd=93&auto=";
var autostop = x + "\">";
document.getElementById("camup").innerHTML = up + autostop;
document.getElementById("camdown").innerHTML = down + autostop;
document.getElementById("camleft").innerHTML = left + autostop;
document.getElementById("camright").innerHTML = right + autostop;
document.getElementById("camupright").innerHTML = upright + autostop;
document.getElementById("camupleft").innerHTML = upleft + autostop;
document.getElementById("camdownleft").innerHTML = downleft + autostop;
document.getElementById("camdownright").innerHTML = downright + autostop;
}
</script>

<map name="image-map">
<img src="ptz.jpg" usemap="#image-map">
<p id="camup"></p>
<p id="camdown"></p>
<p id="camleft"></p>
<p id="camright"></p>
<p id="camupright"></p>
<p id="camupleft"></p>
<p id="camdownleft"></p>
<p id="camdownright"></p>
<!--
<area alt="Up" title="Up" target="control" coords="127,31,25" shape="circ" 
href="control.php?cmd=0&auto=false">
<area alt="Down" title="Down" target="control" coords="127,170,30" 
shape="circ" href="control.php?cmd=2&auto=false">
<area alt="Left" title="Left" target="control" coords="39,93,30" shape="circ" 
href="control.php?cmd=4&auto=false">
<area alt="Right" title="Right" target="control" coords="217,93,25" 
shape="circ" href="control.php?cmd=6&auto=false">
<area alt="UpRight" title="UpRight" target="control" coords="181,49,22" 
shape="circ" href="control.php?cmd=91&auto=true">
<area alt="UpLeft" title="UpLeft" target="control" coords="71,49,22" 
shape="circ" href="control.php?cmd=90&auto=true">
<area alt="DownLeft" title="DownLeft" target="control" coords="63,144,22" 
shape="circ" href="control.php?cmd=92&auto=true">
<area alt="DownRight" title="DownRight" target="control" coords="188,144,22" 
shape="circ" href="control.php?cmd=93&auto=true"> 
-->
<area alt="Stop" title="Stop" target="control" coords="126,95,46" 
shape="circ" href="control.php?cmd=1&auto=true">
</map>
</center>
<iframe name="control" style="display:none"></iframe>

不要忘记在身体负荷上调用 myFunction。

再次感谢，干杯，Falk