如何将数据从html发送到控制器并重新加载页面

Question

我已经编写了用于从网页向控制器发送数据的代码。我不是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浏览器中发生，并且在其他浏览器中给出了错误。如果我用然后网页无法发送数据到控制器，但是在所有浏览器中正在刷新。

还有其他方法可以实现这一目标吗？谁能帮帮我吗？

关于，Vibhu。

Answer 1

使用通过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代码以使其正常工作。

我建议您尝试以下示例。就像我上面提到的，在HTML中添加.js文件或将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.
  });

});