如何将数据从 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浏览器和其他浏览器给出错误。 如果我使用 然后网页无法将数据发送到控制器，但在所有浏览器中正在刷新。

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

问候， 维布。

Answer 1

使用通过 JavaScript 发送和接收数据的 AJAX 请求。通过这种方式，您可以针对提交表单时发生的情况创建自己的逻辑。如果我理解正确，您需要以下内容：

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

首先，删除onclick 事件处理程序。它将干扰我们的新侦听器，该侦听器将向服务器发出 HTTP 请求。将 JS 文件添加到您的 HTML 或将所有 JS 写入 <script> 元素中。只需将它们放在页面底部关闭 </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 调用的 url 应该是这样的：'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.
  });

});