проблемы с выполнением вызова jquery ajax внутри функции

Question

Я хотел бы поместить вызов ajax в функцию, поскольку я использую его несколько раз в разных местах. Я хочу, чтобы версия ответа была изменена. Вот что я пытаюсь сделать (очень упрощенно).

a = getAjax();
$('body').append('<div>'+a+'</div>');
function getAjax() {
  $.ajax({
   type: "GET",
   url: 'someURL',
   success: function(response) {
     return response;
  });
}

Однако происходит то, что функция добавления работает до того, как в функции getAjax определено «a». Есть мысли?

Answer 1

AJAX является асинхронным.Это означает, что код в обработчике успеха задерживается до тех пор, пока запрос не будет успешным, а остальная часть кода продолжает работать как обычно.Вам нужно поместить соответствующий код в обработчик успеха AJAX:

getAjax();
function getAjax() {
  $.ajax({
   type: "GET",
   url: 'someURL',
   success: function(response) {
     $(document.body).append('<div>'+response+'</div>');
  });
}

Обратите внимание, что я также оптимизировал ваш селектор body, используя собственный Javascript document.body вместо стандартного селектора тегов.

---

Редактировать Версия обратного вызова

function getAjax(callback) {
    $.ajax({
        type: 'GET',
        url: 'someURL',
        success: callback
    });
}

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

getAjax(function(response) {
    $(document.body).append('<div>'+response+'</div>');
});

или

getAjax(function(response) {
    alert(response);
});

или что-то еще.

Код внутри анонимного вызова функции будет обработан после завершения запроса AJAX.

Answer 2

Есть два способа пометить это.один из них должен использовать обратный вызов успеха:

$.ajax({
   type: "GET",
   url: 'someURL',
   success: function(response) {
     AppendResponse(response);
  });

другой - установить асинхронное значение false http://api.jquery.com/jQuery.ajax/:

var a;
getAjax();
$('body').append('<div>'+a+'</div>');
function getAjax() {
  $.ajax({
   type: "GET",
   url: 'someURL',
   async: false,
   success: function(response) {
     a = response;
  });
}

Важное замечание о не асинхронности:

Крест-domain запросы и dataType: запросы "jsonp" не поддерживают синхронную работу.

Answer 3

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

a = getAjax();
function getAjax() {
  $.ajax({
   type: "GET",
   url: 'someURL',
   success: function(response) {
     inputText(response);
  });
}

inputText(someText) {
$(document.body).append('<div>'+ someText +'</div>');
}

Таким образом, вы можете создать, если операторы / другие альтернативы продолжают использовать одну и ту же команду AJAX для разных результатов

Answer 4

Почему бы вам не вернуть ответ на другую функцию в обратном вызове успеха.Это должно удовлетворить ваши потребности в различных ответах:

getAjax();
function getAjax() {
  $.ajax({
   type: "GET",
   url: 'someURL',
   success: function(response) {
     AppendResponse(response);
  });
}

function AppendResponse(response) {
$('body').append('<div>'+response+'</div>');
}

Answer 5

Вы можете передать обработчик функции getAjax(), но если пользователю нужна информация для следующего решения, тогда почему бы не подождать, используя async: false?

function getAjax(handler) {
   $.ajax({
   type: "GET",
   url: 'someURL',
   success: function(response) {
     handler(response);
  });
};
function callGetAjax(response) {
  if(response === undefined) {
    getAjax(callGetAjax);
  } else {
    $('body').append('<div>'+response+'</div>');
  }
}