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

Question

我的网络摄像头有一个控件.php文件，我能够通过使用图像映射的href链接向其发送命令，如下所示： href="command.php？cmd=1"。在控件中.php是一个睡眠定时器，可在 1 秒后停止相机的移动。一切正常。现在我想在网络摄像头流页面添加一个复选框，并且除了 comnand 之外.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。

再次感谢和干杯，福尔克