我已经用 html 和 css 为 esp8266 写了一个网络服务器。 我在 Web 服务器中有一些按钮，我在我的代码中使用了 get 方法。 在 arduino 中，我说当它看到我的按钮名称时，打印 okk。 那是在这里:
if(str.IndexOf("Turn+On")>0)
{
cilent.print("Okkk"}
}但是每次我刷新浏览器以及每次按下所有按钮时，Web 服务器都会向我发送 ok。 但我想在特定按钮上设置命令而不是所有按钮。
我的意思是每个按钮都有自己的命令。 我的 HTML 代码在这里:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Lato", sans-serif;
}
/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
div.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #000000;
border-top: none;
}
.button {
position: relative;
background-color: #C0C0C0;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
body,
html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("http://free4kwallpaper.com/wp-content/uploads/2016/01/New-Age-4K-Abstract-Wallpapers.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="tab bg">
<button class="tablinks" onclick="Tools(event, 'Lights')">Lights</button>
<button class="tablinks" onclick="Tools(event, 'Digital')">Digital</button>
<button class="tablinks" onclick="Tools(event, 'Kitchen')">Kitchen</button>
</div>
<div id="Lights" class="tabcontent bg">
<div class="tab">
<button class="tablinks" onclick="Tools(event, 'Bedroom1')">Bedroom1</button>
</div>
<div class="tab">
<button class="tablinks" onclick="Tools(event, 'Bedroom2')">Bedroom2</button>
</div>
<div class="tab">
<button class="tablinks" onclick="Tools(event, 'Hall')">Hall</button>
</div>
<div class="tab">
<button class="tablinks" onclick="Tools(event, 'Kitchen1')">Kitchen1</button>
</div>
</div>
<div id="Bedroom1" class="tabcontent bg">
<form>
Turn On:<br>
<input class="button" type="submit" name="Turn On" value="B1Turn On">
<br> Turn Off:<br>
<input class="button" type="submit" name="Turn Off" value="B1Turn Off">
</form>
</div>
<div id="Bedroom2" class="tabcontent bg">
<form>
Turn On:<br>
<input class="button" type="submit" name="Turn On" value="B2Turn On">
<br> Turn Off:<br>
<input class="button" type="submit" name="Turn Off" value="B2Turn Off">
</form>
</div>
<div id="Hall" class="tabcontent bg">
<form>
Turn On:<br>
<input class="button" type="submit" name="Turn On" value="HTurn On">
<br> Turn Off:<br>
<input class="button" type="submit" name="Turn Off" value="HTurn Off">
</form>
</div>
<div id="Kitchen1" class="tabcontent bg">
<form>
Turn On:<br>
<input class="button" type="submit" name="Turn On" value="KTurn On">
<br> Turn Off:<br>
<input class="button" type="submit" name="Turn Off" value="KTurn Off">
</form>
</div>
<div id="Digital" class="tabcontent bg">
<div class="tab">
<button class="tablinks" onclick="Tools(event, 'TV')">TV</button>
</div>
<div class="tab">
<button class="tablinks" onclick="Tools(event, 'Splitter')">Splitter</button>
</div>
</div>
<div id="TV" class="tabcontent bg">
<form>
Turn On:<br>
<input class="button" type="submit" name="Turn On" value="TTurn On">
<br> Turn Off:<br>
<input class="button" type="submit" name="Turn Off" value="TTurn Off">
</form>
</div>
<div id="Splitter" class="tabcontent bg">
<form>
Turn On:<br>
<input class="button" type="submit" name="Turn On" value="STurn On">
<br> Turn Off:<br>
<input class="button" type="submit" name="Turn Off" value="STurn Off">
</form>
</div>
<div id="Kitchen" class="tabcontent bg">
<div class="tab">
<button class="tablinks" onclick="Tools(event, 'Microvawe')">Microvawe</button>
</div>
<div class="tab">
<button class="tablinks" onclick="Tools(event, 'Refrigerator')">Refrigerator</button>
</div>
</div>
<div id="Microvawe" class="tabcontent bg">
<form>
Turn On:<br>
<input class="button" type="submit" name="Turn On" value="MTurn On">
<br> Turn Off:<br>
<input class="button" type="submit" name="Turn Off" value="MTurn Off">
</form>
</div>
<div id="Refrigerator" class="tabcontent bg">
<form>
Turn On:<br>
<input class="button" type="submit" name="Turn On" value="RTurn On">
<br> Turn Off:<br>
<input class="button" type="submit" name="Turn Off" value="RTurn Off">
</form>
</div>
<script>
function Tools(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>最佳答案
您向这样的表单添加一个 Action :
<form action="/url/goes/here">
这是经过此更改后前两个按钮的样子
<div id="Bedroom1" class="tabcontent bg">
<form action="/bedroom1">
Turn On:<br>
<input class="button" type="submit" name="Turn On" value="B1Turn On">
<br> Turn Off:<br>
<input class="button" type="submit" name="Turn Off" value="B1Turn Off">
</form>
</div>
<div id="Bedroom2" class="tabcontent bg">
<form action="/bedroom2">
Turn On:<br>
<input class="button" type="submit" name="Turn On" value="B2Turn On">
<br> Turn Off:<br>
<input class="button" type="submit" name="Turn Off" value="B2Turn Off">
</form>
</div>
现在，在您的 esp8266 服务器代码上，您需要检查每个 HTTP 请求的路径以确定按下了哪个按钮。
假设您单击了卧室 1 的“打开”按钮。Web 浏览器的响应是这样的:
POST /bedroom1 HTTP/1.1
... some HTTP headers will follow
Turn+On=B1Turn+On
解析出路径(上例中的/bedroom1)是你的工作。编码愉快!
关于html - HTML 中的获取方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45567449/