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

我已经写了一个代码，用于将数据从网页发送到控制器。我不是一个喜欢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>

波特率：
位/秒
2304001152005760038400192001440009600480024001200600300110位/秒

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

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

然后网页可以发送到控制器，并且重新加载也会发生，但它仅在microsoft edge浏览器中发生，并且在其他浏览器中出现错误。 如果我使用 然后，网页无法将数据发送到控制器，但它正在所有浏览器中刷新

有没有其他方法可以做到这一点？ 有人能帮我吗

问候,，

---

Vibhu。

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

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

首先，删除

onclick

事件处理程序。它将干扰我们的新侦听器，该侦听器将向服务器发出HTTP请求。将JS文件添加到HTML或将所有JS写入

元素中。只需将它们放在页面底部的结束标记之前即可

因此，在裸体情况下，您的表单如下面的示例所示

<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>

---

您能指定抛出了什么错误吗？您的

.cgi

文件能否将您重定向到当前页面以使其重新加载？@EmielZuurbier它显示“此页面不工作，未发送任何数据”。我试图在.cgi中处理它，但我无法解决这个问题，所以我希望在html方面解决这个问题。嗨，埃米尔，谢谢。我创建了一个.js文件并粘贴了您建议的代码，得到的错误与“页面未收到任何响应”相同。我应该从控制器端发送任何响应吗？如果是，我应该发送什么类型的响应？如果我发送一些随机文本作为响应，响应状态为200，那么如果我单击提交，页面将变为空白，并且页面上不会显示任何内容。如果我发送响应，有时当我单击提交时，它会下载baudrate.cgi文件。我得到的URL如下：“baudrate.cgi？br=14400”，但是在.js文件之前，我也得到了相同的URL。我应该如何确认它是否正在调用.js文件？我们如何知道调用baudrate.cgi是使用.js文件还是

此操作？我是否应该在html中编辑表单块中的任何内容？我刚刚删除了html中的

onclick

，其他的都一样。

// 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.
  });

});