我写了一个代码,用于从网页向控制器发送数据。我不是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> <B>Baud Rate:</B></FONT></TD>
<TD align=center height=25><FONT style="FONT-SIZE: 8pt" face=Arial> <!--#p0br--> bits/second</FONT></TD>
<TD><FONT style="FONT-SIZE: 8pt" face=Arial> <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> 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/