Как я могу контролировать завершение этой функции AJAX?

Question

Я изучаю ajax в течение недели и пытаюсь понять, как я надеюсь завершить функцию ajax.

В моей функции jquery я получаю идентификатор нескольких кнопок, которые есть в моемindex, этот идентификатор отправил его с помощью ajax во внешний файл с именем «task-category.php», что единственное, что он делает, - это sql-запрос к моей базе данных, и он возвращает свой ответ в виде JSON, когда я получаю JSONЯ просматриваю его и одновременно печатаю с индексом ajax.

Моя проблема возникает, когда я хочу узнать, в какой момент я закончил путешествие по всем файлам json для печати на индексном экране.что "поиск выполнен успешно" или "данные не найдены".

$(document).ready(function() {
 
    $('ul#categoria li').click(function() {

      let categoria = $(this).attr('id');
      $.ajax({
        url: 'task-categoria.php',
        data: {categoria},
        type: 'POST',
        success: function (response) {
          if(!response.error) {
            let tasks = JSON.parse(response);
            let template = '';
            tasks.forEach(task => {
              template += `<a href='index.php?idrec=${task.idrec}'>
                     <div class="img-container grid-item">
            <img class="img-thumbnail" src="${task.imag}">
            <div class="overlay">
               <span>${task.tit}</span>
            </div>
         </div>
         </a>` 
            });
      
            $('#grid-container').html(template);
          }
        } 
      
      })
    });
 
});

Answer 1

Сделайте ваш ответ API хорошим, чтобы вы могли легко справиться с ним, если вы можете добавить свое условие в соответствии с ответом API. Ваш ответ API должен быть таким, как показано ниже

{'status': true, 'error': false, 'data': ['your data'], 'message':"Data Fetch successfully"}

Я сделал некоторые изменения, как показано ниже:- $ (документ) .ready (function () {

$('ul#categoria li').click(function() {

  let categoria = $(this).attr('id');
  $.ajax({
    url: 'task-categoria.php',
    data: {categoria},
    type: 'POST',
    dataType: 'json',
    success: function (response) {
    // Best thing to do is that always use status of response true/false
      if(!response.error) {
      if(response.status == true) {
        let tasks = JSON.parse(response);
        let template = '';
        tasks.forEach(task => {
          template += `<a href='index.php?idrec=${task.idrec}'>
                 <div class="img-container grid-item">
        <img class="img-thumbnail" src="${task.imag}">
        <div class="overlay">
           <span>${task.tit}</span>
        </div>
     </div>
     </a>` 
        });

        $('#grid-container').html(template);
      }
      alert('data fetch successfully');
      } else {
      alert('No data found');
      }
    },error: function (error) {
        console.log('Some error occured please try later!');
    }

  })
});

});

Answer 2

поток ajax выглядит следующим образом

вы можете использовать success для основного вывода и затем завершить , чтобы сказать, что завершено