Ajax-вызов внутри веб-страницы повторяется при обновлении - PullRequest
Новая
       6

Ajax-вызов внутри веб-страницы повторяется при обновлении

0 голосов
/ 22 октября 2018

Я управляю сервером, обслуживающим простую веб-страницу.На странице есть кнопки, образующие клавиатуру, которая выполняет простые 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, то это явление повторяется (хотя вызовы могут быть снова перемешаны).

Таким образом, типичный последовательный вывод может выглядеть следующим образомthis: 

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>
...