问题描述
我在 esp32 上托管了一个网络服务器,并让它在 GET 请求中显示一个网站。当我单击 pause_button 时,它会向服务器发送一个 GET 请求,其中包含请求标头中 esp32 的相应信息。当我尝试使用手机访问网页并尝试第一次和第二次按下 pause_button 时,button_clicked() 函数会触发,但在我的网络服务器上未检测到 GET 请求。在前两次单击后,按钮工作正常,我可以检测到移动请求。在桌面上,一切从一开始就正常。这是脚本标签包含请求的网页的 html 代码:
<html>
<head>
<title>Smart Vinyl</title>
<link rel="shortcut icon" type="image/png" href="https://pngimg.com/uploads/vinyl/vinyl_PNG105.png"/>
</head>
<style>
body {
display: flex;
text-align: center;
color: white;
font-family: "Trebuchet MS",Arial;
margin-left:auto;
margin: 0;
margin-right:auto;
background-image: url("https://i.ibb.co/KXh2MXS/iu.png");
background-repeat: no-repeat;
background-size: cover;
}
.container{
position: relative;
height:100%;
width:60%;
margin:0%
}
input[type=range] {
-webkit-appearance: none;
transform:rotate(180deg);
}
#myRange::-webkit-slider-thumb{
height: 100px;
width: 60px;
border-radius: 3px;
background-color: transparent;
background: url("https://i.ibb.co/DCvbp96/cartridge.png") center no-repeat;
transform: rotate(-90deg);
background-size:contain ;
cursor: pointer;
-webkit-appearance: none;
}
.slider{
position: relative;
width: 64.5%;
height: 0.5%;
top: 50%;
right: 0%;
left:12%;
z-index: 3;
}
#vinyl{
filter:drop-shadow(30px 10px 8px rgba(0,0.4));
position: relative;
left:0%;
height:100%;
width:100%
}
.right-container{
width: 40%;
margin:0px;
padding-top: 20%;
}
.form{
background: #3B484E;
margin:10%;
padding:20%;
padding-top:10%;
padding-bottom:40%;
border-radius: 2%;
Box-shadow: 10px 10px 5px black;
}
#pause_button{
height: 8%;
padding: 5%;
}
</style>
<body>
<div class="container">
<input type="range" min="115" max="153" value="115" class="slider" id="myRange" onchange=getSliderValue(this.value)>
<img src="https://i.ibb.co/J7SJ1jF/vinyl.png" id="vinyl">
</div>
<div class="right-container">
<div class="form">
<h1>Value: <span id="servoPos">115</span></h1>
<button type="button" id="needle_pos_button">Change Needle Pos</button>
<h3>Current Arm-status</h3>
<img src="https://i.ibb.co/Gd5KCBk/start.png" id="pause_button">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
servo_pos = document.getElementById("servoPos");
pos = "115";
$('#pause_button').click(function(){
if ($('#pause_button').attr('src') == 'https://i.ibb.co/Gd5KCBk/start.png'){
$('#pause_button').attr('src',"https://i.ibb.co/BzqqHZK/pause.png");
$.get("?armstatus=" + "ON" + "&",function(data,status){
alert("Data: " + "ON");
});
} else {
$('#pause_button').attr('src',"https://i.ibb.co/Gd5KCBk/start.png");
$.get("?armstatus=" + "OFF" + "&",status){
alert("Data: " + "OFF");
});
}
})
function getSliderValue(value){
pos = value;
servo_pos.innerHTML = value;
}
//needle-pos-request
$(document).ready(function(){
$("#needle_pos_button").click(function(){
if ($('#pause_button').attr('src') == 'https://i.ibb.co/Gd5KCBk/start.png'){
$.get("?needlevalue=" + pos + "&",status){
alert("Data: " + pos);
});
} else {
alert("Cant change Needle when Music is playing");
}});
});
</script>
</body>
</html>
我发现在移动设备上,浏览器一开始会发送更多请求,这可能是它一开始不起作用的原因,但我仍然不知道如何实际解决这个问题。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)