我正在运行服务器，并提供一个简单的网页。该页面具有构成小键盘的按钮，这些小键盘可以对服务器进行简单的Ajax调用，如下所示：
<button class="push white-outline" onclick="makeAjaxCall('button_1')">
1
</button>
makeAjaxCall函数也非常简单：
function makeAjaxCall(url){$.ajax({"url":url})}
服务器侦听此消息，然后执行以下操作：
server.on("/button_1", [](){
Serial.println("User has entered 1");
server.send(200, "text/plain", "User has entered 0");
});
（FWIW，服务器在ESP8266上运行，使用Arduino IDE编写。）
我注意到的是，有时候，当我手动刷新页面时，会重复执行上一个Ajax调用或最后几个Ajax调用。因此，我按1、2、3、4、5、6，然后刷新，页面将刷新，但所有这些调用将再次进行。这似乎是偶发性和不可预测的。同样，如果重复打多个电话，它们可能会乱七八糟。而且，如果这种现象发生在一次刷新上，而我又在没有进行任何新Ajax调用的情况下再次刷新，则该现象会重复出现（尽管这些调用可能会再次被打乱）。
因此典型的串行输出可能看起来像这样：
User has entered 1 //Manually entered in browser on page
User has entered 2 //Manually entered in browser on page
User has entered 3 //Manually entered in browser on page
Refresh page //Refresh in browser
User has entered 2 //Appears on its own at time of refresh
User has entered 3 //Appears on its own at time of refresh
User has entered 1 //Appears on its own at time of refresh
Refresh page //Refresh in browser
User has entered 1 //Appears on its own at time of refresh
User has entered 2 //Appears on its own at time of refresh
User has entered 3 //Appears on its own at time of refresh
请注意，两次刷新后，错误呼叫的顺序不同。同样，每次刷新后都不会发生这种情况。
有关Ajax的事情可以解释一下吗？可能是浏览器问题？ （我正在iOS Safari和macOS Safari中对此进行测试。）
如果我打这些电话然后等待，那么甚至可以将它们存储在哪里呢？必须记住一些重复的内容。会是服务器吗？会是浏览器吗？
这可能是硬件问题吗？ （董事会本身是否可以在某些地方留一些缓冲？这有点超出我的水平了。）
编辑：添加完整的HTML，以防万一：
<html>
<head>
<title>Garage Door Opener</title>
<meta charset="utf-16">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<style>
body,button {
touch-action:manipulation;
background-color:#282828;
text-align:center;
font-family:'Avenir Medium';
}
.container {
text-align:center;
height:100%;
width:56.2vh;
margin:auto;
background-color:none;
}
.row {
z-index:5;
height:12vh;
width:100%;
display:table;
vertical-align:middle;
padding-bottom: 6vh;
}
.cell{
display:table-cell;
text-align:center;
vertical-align:middle;
margin:auto;
}
.bottom {
vertical-align:bottom;
}
.top {
vertical-align:top;
}
.special-mid {
width:14vh;
}
.special-side {
width:21.1vh;
}
.left {
text-align:left;
}
.right {
text-align:right;
}
.half{
width:50%;
}
.third{
width:33%;
}
.wide{
width:100%;
}
.fourth{
width:25%;
}
.fifth{
width:20%;
}
.push {
border:0;
border-radius:70%;
height:11.2vh;
width:11.2vh;
margin:auto;
}
.display {
border:0;
border-radius:0;
height:11.2vh;
width:90%;
margin:auto;
}
.red {
color:white;
background-color:red;
}
.green {
color:white;
background-color:green;
}
.purple {
color:white;
background-color:purple;
}
.orange {
color:white;
background-color:#FFA500;
}
.blue {
color:white;
background-color:#1E90FF;
}
.white {
color:#282828;
background-color:white;
}
.white-outline {
color:white;
border:0.5vh solid;
border-color:white;
background-color:#282828;
}
.white-outline:active {
color:#282828;
border:0.5vh solid;
border-color:white;
background-color:white;
}
.green-outline {
color:lime;
border:0.5vh solid;
border-color:lime;
background-color:#282828;
}
.yellow-outline {
color:yellow;
border:0.5vh solid;
border-color:yellow;
background-color:#282828;
}
.red-outline {
color:red;
border:0.5vh solid;
border-color:red;
background-color:#282828;
}
.none {
color:#282828;
background-color:#282828;
}
.material-icons.md-18 {
font-size:3.75vh;
line-height:6.56vh;
letter-spacing:-2.4vh;
}
.text-entry {
font-size:3.75vh;
line-height:1.875vh;
}
</style>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script> function makeAjaxCall(url){$.ajax({"url":url})}</script>
<body ontouchstart="">
<div class="container">
<div class="row">
<div class="cell wide">
<button class="display white">
Garage status:
</button>
</div>
</div>
<div class="row">
<div class="cell third">
<button class="push white-outline" onclick="makeAjaxCall('/add_1')">
<p class="text-entry">1</p>
</button>
</div>
<div class="cell third">
<button class="push white-outline" onclick="makeAjaxCall('/add_2')">
<p class="text-entry">2</p>
</button>
</div>
<div class="cell third">
<button class="push white-outline" onclick="makeAjaxCall('/add_3')">
<p class="text-entry">3</p>
</button>
</div>
</div>
<div class="row">
<div class="cell third">
<button class="push white-outline" onclick="makeAjaxCall('/add_4')">
<p class="text-entry">4</p>
</button>
</div>
<div class="cell third">
<button class="push white-outline" onclick="makeAjaxCall('/add_5')">
<p class="text-entry">5</p>
</button>
</div>
<div class="cell third">
<button class="push white-outline" onclick="makeAjaxCall('/add_6')">
<p class="text-entry">6</p>
</button>
</div>
</div>
<div class="row">
<div class="cell third">
<button class="push white-outline" onclick="makeAjaxCall('/add_7')">
<p class="text-entry">7</p>
</button>
</div>
<div class="cell third">
<button class="push white-outline" onclick="makeAjaxCall('/add_8')">
<p class="text-entry">8</p>
</button>
</div>
<div class="cell third">
<button class="push white-outline" onclick="makeAjaxCall('/add_9')">
<p class="text-entry">9</p>
</button>
</div>
</div>
<div class="row">
<div class="cell third">
<button class="push white-outline" onclick="makeAjaxCall('/del_char')">
<i class="material-icons md-18">backspace</i>
</button>
</div>
<div class="cell third">
<button class="push white-outline" onclick="makeAjaxCall('/add_0')">
<p class="text-entry">0</p>
</button>
</div>
<div class="cell third">
<button class="push white-outline" onclick="makeAjaxCall('/reset')">
<i class="material-icons md-18">cancel</i>
</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script> function makeAjaxCall(url){$.ajax({"url":url})}</script>
</body>
</html>