Question

我正在尝试将网页与我正在做的其他一些工作联系起来。

我想要一个带有JS脚本的html，它可以将http GET请求发布到我网络上的IP地址。我想要获取的网址是192.168.1.103:3333/relay0/(on/off）

我有一个覆盆子pi来查看与此URL的任何连接并运行一个shell命令来切换一些GPIO引脚，这些引脚又会切换一个8路继电器。

问题是我无法获得GET请求。我对JS不是很好，所以我不能确定我做错了什么。

我希望它一旦我点击复选框就会自动运行JS功能。

到目前为止

代码：

<form>
    <input type="checkbox" id="on_off1" onclick="Relay1() return-false;"/>
</form>

<script type=text/javascript>
function Relay1() {
    var xmlHttp = new XMLHttpRequest();
    if (document.getElementById('on_off1').checked){
        xmlHttp.open("GET", 'http://192.168.1.103:3333/relay4/on', false );
        xmlHttp.send( null );
        return xmlHttp.responseText
        }
    else {
        xmlHttp.open( "GET", 'http://192.168.1.103:3333/relay4/off' , false );
        xmlHttp.send( null );
        return xmlHttp.responseText
        }
}

Answer 1

尝试在下面的复选框上添加onclick功能，因此在更改值后，它将调用指定的函数。

＆＃13;

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

</head>
<body>

<form>
    <input type="checkbox" id="on_off" onclick="Relay1()" />
</form>

<script type=text/javascript>
function Relay1() {
    var xmlHttp = new XMLHttpRequest();
    if (document.getElementById('on_off').checked){
        xmlHttp.open("GET", 'http://192.168.1.103:3333/relay0/on', false );
        xmlHttp.send( null );
        window.alert("Was on, sent to /relay/on");
        return xmlHttp.responseText
    }
    else {
        xmlHttp.open( "GET", 'http://192.168.1.103:3333/relay0/off' , false             );
        xmlHttp.send( null );
        window.alert("Was off, sent to /relay/off");
        }
}
</script>
</body>

＆＃13;

Answer 2

问题1

onsubmit="return (Relay1);">

您正在返回此功能。您需要调用并返回其返回值。

onsubmit="return Relay1();">

问题2

返回xmlHttp.responseText

返回字符串并没有多大意义。您通常希望返回true或false，具体取决于您是否希望提交表单。

如果您不希望表单提交，则只需onsubmit="Relay1(); return false;">

问题3

   return xmlHttp.responseText
   window.alert("Was on, sent to /relay/on");

从函数返回后，您无法在该函数中执行任何其他操作。您需要返回最后的事情。

问题4

xmlHttp.open("GET", 'http://192.168.1.103:3333/relay0/on', false );

不推荐使用XMLHttpRequest的同步请求。他们锁定了用户界面，并且不会发生任何其他事情。

避免它们。而是Use a callback。

如果您需要使用响应来决定是否要提交表单，这会导致问题，但如上所述，您似乎总是想取消请求。

潜在问题5

http://192.168.1.103:3333/relay0/on

您有一个绝对URI，暗示了跨源请求。确保the server is set up to grant your page permission to access the data using CORS。

我希望它一旦我点击复选框就会自动运行JS功能。

然后在复选框上使用change / click事件，而不是表单上的submit事件。

js http GET复选框输入

2 个答案: