JS. Передача данных формы, получение в ответ id задачи и ожидание результата

Question

Не силен в JS, прошу помощи.

Есть html форма, есть JS, который берет данные формы, отправляет POST запросом на заданный url, в ответ получает результат и выводит в нужный div.

$(document).ready(function () {
  $("#form").on("submit", function(event){
    event.preventDefault();
    const form_data = new FormData(this);
    $("#answer").html("");
    $.ajax({
      type: "POST",
      url: form_data.get("url"),
      data: form_data,
      processData: false,
      contentType: false,
      success:function(data){
        $("#answer").html(data);
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.error(textStatus, errorThrown);
        $("#answer").html(textStatus + errorThrown);
      },
    });
  });
});

Так как сейчас пишу на backend довольно ресурсоемкое вычисление, то ожидание результата занимает время. Хочу на стороне браузера в ответ на данные формы отдавать id задачи, потом каждую секунду спрашивать сервер о статусе задачи и при получении результата вывести в нужный div.

Есть примеры как это реализовать на JS на frontend?

Answer 1

Получилось

$("#answer").hide();
var nIntervId;

function check_task(task_url) {
  $.ajax({
    type: "get",
    url: task_url,
    processData: false,
    contentType: false,
    success:function(data){
      if (data['job_status'] == "finished") {
        $("#answer").show();
        for (var key in data['result']){
          var value = data['result'][key];
          $('#' + key).text(value);
        }
        clearInterval(nIntervId);
      }
    },
  });
}


$(document).ready(function () {
  $("#form_1").on("submit", function(event){
    event.preventDefault();
    const form_data = new FormData(this);
    $("#answer").hide();
    $.ajax({
      type: "POST",
      url: form_data.get("url"),
      data: form_data,
      processData: false,
      contentType: false,
      success:function(data){
        if ('job_url' in data) {
          nIntervId = setInterval(check_task, 1000, (data["job_url"]));
        }
      },
      error:function(jqXHR, textStatus, errorThrown) {
        console.error(textStatus, errorThrown);
        $("#answer").html(jqXHR + textStatus + errorThrown);
      },
    });
  });
});

БЛОГ НА HUSL

JS. Передача данных формы, получение в ответ id задачи и ожидание результата

Ответы (1 шт):