jQuery: Вернуть данные после успешного вызова ajax

Question

Проблема с возвратом значения из асинхронного вызова AJAX

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

Вот код функции:

function testAjax() {
    $.ajax({
      url: "getvalue.php",  
      success: function(data) {
         return data; 
      }
   });
}

Однако, когда я пытаюсь вызвать её и сохранить результат в переменную:

var output = testAjax();  // output будет undefined...

Переменная output оказывается undefined, так как AJAX-запрос выполняется асинхронно, и функция не дожидается его завершения перед возвратом.

Я попробовал изменить код следующим образом:

function testAjax() {
    $.ajax({
      url: "getvalue.php",  
      success: function(data) {
         // пытаюсь что-то сделать с data
      }
   });
   return data; 
}

Но это тоже не работает, поскольку переменная data не определена в данной области видимости, когда функция testAjax возвращает значение.

Как я могу правильно вернуть значение из асинхронного вызова AJAX? Mersi!

Answer 1

Единственный способ вернуть данные из функции — сделать синхронный вызов вместо асинхронного, но это заморозит браузер, пока он ждет ответа.

Вы можете передать функцию обратного вызова, которая будет обрабатывать результат:

function testAjax(handleData) {
  $.ajax({
    url: "getvalue.php",  
    success: function(data) {
      handleData(data); 
    }
  });
}

Вызывайте её так:

testAjax(function(output) {
  // здесь вы используете вывод
});
// Примечание: вызов не будет ждать результата,
// поэтому код продолжит выполняться здесь, пока ждёт.

Answer 2

Вы можете установить параметр async в значение false и вернуть значение за пределами вызова ajax следующим образом:

function testAjax() {
    var result = "";
    $.ajax({
        url: "getvalue.php",
        async: false,
        success: function(data) {
            result = data;
        }
    });
    return result;
}

Имейте в виду, что использование синхронных ajax-запросов может блокировать выполнение других скриптов на странице, что может привести к плохему пользовательскому опыту. Поэтому, если это возможно, старайтесь использовать асинхронные запросы и обрабатывать ответ с помощью колбэков или промисов.

Answer 3

Не знаю, решили ли вы вашу проблему, но я рекомендую другой способ, и он работает 😃

ServiceUtil = ig.Class.extend({
    base_url: 'someurl',

    sendRequest: function(request) {
        var url = this.base_url + request;
        var requestVar = new XMLHttpRequest();
        dataGet = false;

        $.ajax({
            url: url,
            async: false,
            type: "get",
            success: function(data) {
                ServiceUtil.objDataReturned = data;
            }
        });
        return ServiceUtil.objDataReturned;                
    }
});

Основная идея здесь в том, что, установив async: false, вы заставляете выполнение кода ожидать, пока данные не будут получены. После этого вы присваиваете их статической переменной класса, и все волшебным образом работает 😃

jQuery: Вернуть данные после успешного вызова ajax

Проблема с возвратом значения из асинхронного вызова AJAX

3 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных