Как вернуть data из функции ajax?

Question

[raw1]

Добрый день , хочу написать функцию на jq которая бы возвращала значение data , например :

function getData() {
 $.ajax({
        url:'../elem/search.php',
        type: 'POST',
        cache: false,
        success : function(data) {
               // функция возвращающая data
        }
    })
  	return data;
}

Вся трудность заключается в асинхронности кода . ajax срабатывает после return . Пробовал через asyns:false и объявления глобальной переменной data , но попахивает костылём

Comments

[Lynn «Кофеман»]

Это вопрос задают каждый день

[Сергей delphinpro]

Этот вопрос задают очень часто! Вы бы погуглить попробовали прежде чем вопрос писать.

[raw1]

Сергей: Гуглил , но мало что понял и нет гулю я хорошо

Answer 1

[Falseclock]

Есть пара неизвестных в плане как и где вы это используете.
Но если аякс у вас срабатывает по клику на кнопке, то в обработчике кнопки ставите

event.preventDefault(); и ставите проверочное условие

далее вызываете из своего обработчика передаете переменную в функцию
getData(setter,this)

как только переданная переменная setter стала не пустой а случился очередной клик, то продолжаете обработку клика по кнопке.. как-то так

function getData(setter,button) {
 $.ajax({
        url:'../elem/search.php',
        type: 'POST',
        cache: false,
        success : function(data) {
               setter = data;
               button.click();
        }
    })
}

Answer 2

[Денис Инешин]

Суть работы с аяксом в том, что вы ничего тут не возвращаете. Это происходит потому, что ajax-запрос - асинхронный, а возврат результата выполнения функций возможен только для синхронного кода.

Можно:

function calc (x, y) {
    return x + y;
}

Нельзя:

function ajax () {
    return "ajax result";
}

Чтобы работать с асинхронным кодом, вы должны разбить свой код на шаги, примерно так:

// шаг 1 - запрашиваем данные
function step1 () {
      $.ajax({
            success: function (data) {
                  step2(data); // вызываем шаг 2
            }
      });
}

// шаг 2, работаем с полученными данными
function step2 (data) {
     // data доступен здесь
}

Для облегчения работы с асинхронным кодом, существует разные техники, например промисы

Для облегчения работы именно с Ajax, существуют хорошие библиотеки вроде Fetch

Comments

[raw1]

Я все таки не могу вернуть data из функции query. data только внутри step2 .Как можно вернуть data ?

[Денис Инешин]

raw1: я же говорю, вы никак не можете вернуть дата, в асинхронных задачах нет такого понятие как возврат данных. Вы создаете специальную функцию, вроде step2, где данные становятся доступны в какой-то момент в будущем.

[raw1]

Денис Инешин: Спасибо , понял

Answer 3

[Алексей Уколов]

Как вернуть ответ из XMLHttpRequest?

Answer 4

[Дядя Сёма]

Давайте дядя Сёма объяснит...
Ajax и javascript суть одно и тоже, но живут они с разной скоростью.
Все глобальные переменные javascript видны в ajax сразу и их можно изменять. И они таки изменятся везде, но не сразу. Но пока ajax их изменяет, javascript уже отработал и отдыхает.
Чтобы это не мешало - нужно попросить javascript подождать.
Например вот так:

var data_from_ajax= "";
$.ajax(
	{ 
		type: 'POST', 
		url: 'ajax_do_it.php', 
		dataType: 'json',
		beforeSend: function(data) 
		{ 
			alert("Начинаю выполнение Ajax");
		},
		success: function(data)
		{ 
			alert("Запрос POST обработан и вернул данные!");
			window.data_from_ajax=data['PHP_result_here'];
		},
		error: function (xhr, ajaxOptions, thrownError)
		{ 
			alert("Ошибка с PHP"); 
		},
		complete: function(data) 
		{ 
		}
	}
);

/* Тут ничего нет, так как javascript обогнал ajax и переменная ещё не присвоена*/
console.log(data_from_ajax); 

setTimeout(function()
{
	console.log(data_from_ajax); // Покажет данные из PHP
	/* Только здесь данные из PHP доступны */
}, 3000);

/* И тут ничего нет, так как javascript обогнал ajax и переменная ещё не присвоена*/
console.log(data_from_ajax);

Но ждать 3 (или сколько вы там поставите) секунды скучно и не красиво. Это только для примера, так как нормальные пацаны так не делают... Используйте VUE и вот с ним будет красиво. Он и сам подождет и много чего поможет сделать с data_from_ajax (Ну или setInterval и проверку переменной на пустоту....)

Ваш дядя Сёма!