我写了一个代码,用于从网页向控制器发送数据。我不是html专家,我使用一些模板编写。我已经创建了一个表单,并且想将波特率值发送给控制器。

<TABLE width=50%>
    <TBODY>
        <TR>
            <TD width=80%>
                <TABLE width=80%>
                    <TBODY>
                        <TD>
                        <FORM name="baudrate" action="baudrate.cgi" method="get">
                            <TABLE width="100%" border="1" cellpadding="2" cellspacing="2">
                                <TBODY>
                                    <TR>
                                        <TD align=center><FONT style="FONT-SIZE: 8pt" face=Arial>&nbsp;<B>Baud Rate:</B></FONT></TD>
                                        <TD align=center height=25><FONT style="FONT-SIZE: 8pt" face=Arial>&nbsp;<!--#p0br--> bits/second</FONT></TD>
                                        <TD><FONT style="FONT-SIZE: 8pt" face=Arial>&nbsp;<select size="1" name="br"><option value="230400">230400</option><option value="115200">115200</option><option value="57600">57600</option><option value="38400">38400</option><option value="19200">19200</option><option value="14400">14400</option><option value="9600">9600</option><option value="4800">4800</option><option value="2400">2400</option><option value="1200">1200</option><option value="600">600</option><option value="300">300</option><option value="110">110</option></select>&nbsp;bits/S<br></FONT></TD>
                                    </TR>
                                    <TR>
                                        <TD></TD>
                                        <TD align="center"><input name="" value="Apply" onclick="window.history.go(0); return false; "type="submit"></TD>
                                    </TR>
                                </TBODY>
                            </TABLE>
                        </FORM>
                        </TD>
                    </TBODY>
                </TABLE>
            </TD>
        </TR>
    </TBODY>
</TABLE>


在上面的代码中,
单击提交后,我想通过调用baudrate.cgi函数将br值发送到控制器,并且我想重新加载页面。
如果我给

<TD align="center"><input name="" value="Apply" onclick="window.history.go(0) "type="submit" ></TD>


然后该网页能够发送到控制器,并且重新加载也发生了,但仅在Microsoft Edge浏览器中发生,并且在其他浏览器中也给出了错误。
如果我用

然后,该网页无法将数据发送到控制器,但是在所有浏览器中都在刷新。

还有其他方法可以实现吗?
谁能帮帮我吗?

问候,
维布。

最佳答案

使用通过JavaScript发送和接收该数据的AJAX请求。这样,您可以针对提交表单时将要发生的事情创建自己的逻辑。如果我理解正确,则需要以下内容:

submit form -> send data to controller -> get response -> reload page


首先,删除onclick事件处理程序。它将干扰我们的新侦听器,该侦听器将向服务器发出HTTP请求。将JS文件添加到HTML或在<script>元素中写入所有JS。只需将它们放在页面底部</body>标记之前。

因此,准系统的形式类似于下面的示例。

<form name="baudrate" action="baudrate.cgi" method="get">

  ...

  <select size="1" name="br">
    <option value="230400">230400</option>
    <option value="115200">115200</option>
    <option value="57600">57600</option>
    <option value="38400">38400</option>
    <option value="19200">19200</option>
    <option value="14400">14400</option>
    <option value="9600">9600</option>
    <option value="4800">4800</option>
    <option value="2400">2400</option>
    <option value="1200">1200</option>
    <option value="600">600</option>
    <option value="300">300</option>
    <option value="110">110</option>
  </select>

  ...

</form>


您需要选择form元素,然后向其添加事件监听器。这与执行onclick相似,但是现在使用addEventListener方法。通过此方法,您可以将多个功能绑定到单个事件,而不是仅具有一个。

收听submit事件。您猜到,一旦提交表单,都会触发此事件。要正常工作,需要input type="submit"button type="submit"

现在,在函数中,每当触发窗体上的submit时,您都会触发该函数,其中将包含对服务器的AJAX调用的逻辑。您需要获取select name="br"元素的当前值,并将其发送到baudrate.cgi控制器。因此,AJAX调用的网址应如下所示:'baudrate.cgi?br=14400'

每当您发送请求时,就会发生两件事。您会得到一个答复,希望是一个好的答复,或者您会得到一个错误。

如果响应成功,请使用location.reload()重新加载页面。
如果发生错误,只需将其记录下来并调试.cgi代码以使其正常工作。

我建议您尝试下面的示例。就像我上面提到的,将.js文件添加到HTML或将JS粘贴到<script>标记中。并记住将其放在页面底部。

让我知道这是否可行,是否有帮助。

// Select the form element.
const form = document.querySelector('form[name="baudrate"]');

// Listen for when the form submits.
form.addEventListener('submit', function(event) {

  // Cancel the default submit.
  event.preventDefault();

  // Get the value from the select element and add it
  // to the url to send it to the .cgi file.
  const select = form.elements['br'];
  const url = 'baudrate.cgi?br=' + select.value;

  // Send the data and get a response.
  fetch(url).then(function(response) {
    if (response.status === 200) { // If it is a successful response.
      return response.text();
    }
  }).then(function(text) {
    console.log(text); // Show the response from the server.
    location.reload(); // Reload the page.
  }).catch(function(error) {
    console.log(error); // If anything went wrong, show the error.
  });

});

关于javascript - 如何将数据从HTML发送到 Controller 并重新加载页面,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59896648/

10-11 22:25
查看更多