AJAX всегда терпит неудачу через некоторое время - PullRequest
Новая
       8

AJAX всегда терпит неудачу через некоторое время

0 голосов
/ 16 марта 2020

Я попробовал все и искал везде, но я не могу обернуть голову вокруг этого ...

У меня есть кнопка в форме, которая вызывает по щелчку функцию javascript, которая, в свою очередь, делает AJAX запрос на мой сервер.

Проблема не в том, что я делаю, запрос сделан, но метод .fail всегда выполняется через несколько секунд, и я не получаю ошибки. Я уверен, что мой сервер не отправляет ответ (это сервер на ESP32, который использует ESPAsyncWebServer, код ниже), и, что еще более важно, сетевой инспектор на Firefox и Safari не показывает связь.

Я перепробовал все что угодно, от добавления timeout:0 и cache:false к вызову AJAX до перехода на GET вместо POST в качестве метода AJAX, а также предотвращения события по умолчанию на кнопку, возвращая false или используя .preventDefault () в функции javascript, но ничего не работает. Чего мне не хватает?

Вот HTML: 

<form>
    <div class="form-row align-items-center mt-4">

       <div class="form-group col-md-8">
            <label for="newCode">Codice</label> 
            <div class="input-group">
                <input type="text" class="form-control" id="newCode" placeholder="12345678">
                <div class="input-group-append">
                    <button type="button" class="btn btn-secondary" id="learnCodeButton" onclick="learnNewCode(); return false;">Rileva</button>
                </div>
            </div>
       </div>

       <div class="form-group col-md-4">

            <label for="newAlarmTriggerDelay">Delay Allarme (s)</label> 
            <input type="text" class="form-control" id="newAlarmTriggerDelay" placeholder="60">

       </div>

   </div>

   <div class="form-row">

       <div class="form-group col-md-12">

            <label for="newDescription">Descrizione</label>
            <input type="text" class="form-control" id="newDescription" placeholder="Studio Interno">

       </div>

   </div>

   <div class="d-flex justify-content-center">
      <button type="submit" id="saveSensor" onclick="saveSensor()" class="btn btn-lg btn-primary mt-4 pl-5 pr-5">Salva</button>
   </div>

   <div class="d-flex justify-content-center">
      <button type="button" id="removeSensor" onclick="removeSensor()" class="btn btn-lg btn-link mt-2 text-danger">Rimuovi</button>
   </div>

</form>

javascript функция: 

function learnNewCode() {

    document.getElementById("learnCodeButton").className = "btn btn-warning";

    $.ajax({
        method: "POST",
        url: "/learnCode",
        dataType: "json",   
    })
      .done(function(returnedData) {
        //substituteInField("newCode", returnedData["newCode"]);
    })
      .fail(function(jqXHR, textStatus, errorThrown) {
        //substituteInField("newCode", "Learn code failed - Retry");
        console.log("jqXHR response: " + jqXHR.responseText);
        console.log("Status: " + textStatus);
        console.log("Error: " + errorThrown);
    }).always(function() {
        document.getElementById("learnCodeButton").className = "btn btn-secondary";
    });

}

код на ESP32: 

server.on("/learnCode", HTTP_POST, [](AsyncWebServerRequest * request) {       
  Serial.println("POST /learnCode");      
});

и, наконец, журнал консоли (Firefox): 

XHR POST http://192.168.1.105/learnCode
jqXHR response: undefined
Status: error
Error:

Спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 16 марта 2020

Так что на самом деле я решил эту проблему с некоторой помощью ... Дело в том, что опция тайм-аута в запросе AJAX относится к получению запроса сервером, а не ко времени, которое сервер тратит на отправку ответа. .

Чтобы объяснить это лучше, когда запрос AJAX отправляется на сервер, сервер подтверждает получение запроса клиенту. Время между выполнением запроса и сервером, подтверждающим его получение, может регулироваться параметром тайм-аута.

После подтверждения получения, если сервер не обработает ответ менее чем за несколько секунд, вызов AJAX завершается неудачно.

В моем случае ESPAsyncWebServer, вероятно, подтверждает получение до вызова метода server.on (), поэтому, если я не отправляю ответ или ответ занимает слишком много времени для доставки AJAX вызов не удался. Фактически, если я загружаю веб-сайт, выключаю ESP и после этого пытаюсь сделать звонок, он не прервется, а будет ждать бесконечно, поскольку время ожидания по умолчанию бесконечно.

Решение, вероятно, будет отправьте вызов для активации необходимых мне методов на ESP, а затем периодически опрашивайте сервер, пока не получите ответ.

0 голосов
/ 16 марта 2020

Вы не отправляете ответ с вашего ESP32 Сервера. У клиента, вероятно, истекло время ожидания.

Попробуйте добавить ответ (обратите внимание, что тип ответа здесь text/plain отрегулируйте соответственно). 

server.on("/post", HTTP_POST, [](AsyncWebServerRequest *request){
    request->send(200, "text/plain", "Post route");
});
...