<button onclick="sendData('on')">开灯</button>按键控件不是应该放在form中吗?
时间: 2023-08-14 12:25:13 浏览: 40
按键控件 `<button>` 并不一定要放在 `<form>` 中,它可以单独使用,也可以和表单一起使用。在控制 ESP8266 板上的 LED 灯这个场景下,我们只需要通过点击按钮来向服务器发送请求,不需要提交表单数据,所以不需要使用 `<form>` 标签。
当需要使用表单来提交数据时,我们可以将按钮放在表单中,例如:
```html
<form action="http://192.168.1.100/led" method="POST">
<input type="hidden" name="status" value="on">
<button type="submit">开灯</button>
</form>
```
在这个表单中,我们使用了一个隐藏域 `<input type="hidden">` 来存储 LED 灯的控制命令,当用户点击提交按钮时,表单会自动将数据发送到服务器。这种方式在需要提交表单数据时比较常见。
相关问题
<button onclick="sendData('on')">开灯</button> <button onclick="sendData('off')">关灯</button> <script> function sendData(status) { var xhr = new XMLHttpRequest(); xhr.open("GET", "http://192.168.1.100/led?status=" + status, true); xhr.send(); } </script>和<form action="http://192.168.1.100/led" method="POST"> <input type="hidden" name="status" value="on"> <button type="submit">开灯</button> </form>有什么不同
这两段代码实现的功能都是控制 ESP8266 板上的 LED 灯,但是使用的方法不同。
第一段代码使用了 XMLHttpRequest 对象来发送 HTTP GET 请求,请求的 URL 中传递了 LED 灯的控制命令。这种方式不需要使用表单,可以直接通过 JavaScript 代码来控制 LED 灯。
第二段代码使用了表单来提交数据,表单中包含了一个隐藏域 `<input type="hidden">` 用来存储 LED 灯的控制命令。当用户点击提交按钮时,表单会自动将数据发送到服务器。这种方式需要使用表单,比较适合需要用户输入数据或提交表单数据的场景。
总的来说,这两种方式都可以实现控制 LED 灯的功能,但是具体使用哪种方式需要根据实际需求来选择。如果只需要简单地控制 LED 灯,可以使用第一种方式;如果需要用户输入数据或提交表单数据,可以使用第二种方式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学生成绩管理系统</title> <link type="text/css" rel="stylesheet" href="css/style.css"/> //<script type="text/javascript" src="js/script.js"></script> </head> <body> <h1>学生成绩管理系统</h1> <table> <!-- 学生成绩表格--> <tr> <td><a href = "insert.php"><button>添加</button></a></td> </tr> </table> <?php require_once('./server/conn.php'); $sql = "select * from result"; $result = $conn->query($sql); if ($result->num_rows > 0) { //输出数据 while ($row = $result->fetch_assoc()) { ?> <tr> <td><?php echo $row['id'] ?></td> <td><?php echo $row['name'] ?></td> <td><?php echo $row['age'] ?></td> <td><?php echo $row['result'] ?></td> <td> <button onclick = "toUpdata(this) ">修改</button> <button onclick = "remove(this)">删除</button> </td> </tr> <?php } } $conn->close(); ?> </body> </html> 请给我找出错误
在代码中,有以下错误:
1. 在 `<link>` 标签中的 CSS 文件路径没有正确注释,注释符 `//` 应该改为 `<!-- -->`。
2. 在 PHP 代码中,没有将表格的 `<tr>` 标签和 `<td>` 标签放在 `<table>` 标签中。
3. 在 PHP 代码中,没有将 `<table>` 标签的闭合部分添加到代码中。
4. 在 PHP 代码中,没有将 `<tr>` 和 `<td>` 标签的闭合部分添加到代码中。
5. 在 PHP 代码中,`<button>` 标签的 `onclick` 属性中的函数名称没有正确拼写,应该为 `update` 而不是 `toUpdata`。
6. 在 PHP 代码中,`<button>` 标签的 `onclick` 属性中的函数名称没有加上括号,应该为 `onclick="update(this)"` 而不是 `onclick="toUpdata(this)"`。
修改后的代码如下所示:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生成绩管理系统</title>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<!-- 将注释符 // 改为注释符号 -->
<!--<script type="text/javascript" src="js/script.js"></script>-->
</head>
<body>
<h1>学生成绩管理系统</h1>
<table>
<!-- 将 <tr> 和 <td> 标签放在 <table> 中 -->
<tr>
<td><a href="insert.php"><button>添加</button></a></td>
</tr>
<?php
require_once('./server/conn.php');
$sql = "select * from result";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
//输出数据
while ($row = $result->fetch_assoc()) {
?>
<!-- 将 <tr> 和 <td> 标签的闭合部分添加 -->
<tr>
<td><?php echo $row['id'] ?></td>
<td><?php echo $row['name'] ?></td>
<td><?php echo $row['age'] ?></td>
<td><?php echo $row['result'] ?></td>
<td>
<!-- 将函数名称拼写正确,并添加括号 -->
<button onclick="update(this)">修改</button>
<button onclick="remove(this)">删除</button>
</td>
</tr>
<?php
}
}
$conn->close();
?>
<!-- 将 <table> 标签的闭合部分添加 -->
</table>
</body>
</html>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
找出这串代码的错误并给出正确答案<!DOCTYPE html> <?php require_once('./conn.php'); $sql = "select * from result"; $result = $conn->query($sql); if ($result->num_rows>0){ while($row = $result->fetch_assoc()) { ?> <?php echo $row['id'] ?> <?php echo $row['name'] ?> <?php echo $row['age'] ?> <?php echo $row['result'] ?> <button onclick="toUpdate(this)">修改</button> <button onclick="remove(this)">删除</button> <?php } } $conn->close(); ?> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/index.js"></script> <title>学生成绩管理系统</title> </head> <body> 学生成绩管理系统 <button>添加</button> </body> </html> <script type="text/javascript"> function remove(ele){ let id = ele.parentElement.parentElement.children[0].innerText; window.location.href="remove_server.php?id="+id; } function toUpdate(ele) { let id = ele.parentElement.parentElement.children[0].innerText; window.location.href = "./update.php?id="+id; } </script>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)