Обратный вызов Javascript из пользовательской функции jQuery AJAX

Question

У меня есть этот код jQuery

(function () {
    function load_page (pagename) {
        $.ajax({
            url: "/backend/index.php/frontend/pull_page/",
            type: "POST",
            data: {page: pagename},
            success: function (json) {
                var parsed = $.parseJSON(json);
                console.log(parsed);
                return parsed;
            },
            error: function (error) {
                $('#content').html('Sorry, there was an error: <br>' + error);
                return false;
            }
        });
    }
    ...
    var json = load_page(page);
    console.log(json);
    if (json == false) {
        $('body').fadeIn();
    } else {
        document.title = json.pagename + ' | The Other Half | freddum.com';
        $("#content").html(json.content);
        $('#header-navigation-ul a:Contains('+page+')').addClass('nav-selected');
        $('body').fadeIn();
    }
})();

и, знаете что, он не работает.AJAX-запрос срабатывает нормально, и сервер возвращает допустимый JSON, но console.log(json); возвращает undefined, и js вылетает при достижении json.pagename.Первый console.log(parsed) также возвращает хорошие данные, так что это просто проблема с return (я думаю).

Я знал, что цепляюсь за соломинку, и было бы чрезвычайно, если бы это работало, но это не так.Если честно, я не знаю, как запрограммировать функции обратного вызова для этой ситуации.

EDIT : Это мой теперь обновленный код, который тоже не работает.

function load_page (pagename, callback) {
    $.ajax({
        url: "/backend/index.php/frontend/pull_page/",
        type: "POST",
        data: {page: pagename},
        success: function (json) {
            callback(json);
        },
        error: function (error) {
            $('#content').html('Sorry, there was an error: <br>' + error);
            var json = false;
            callback(json);
        }
    });
}
(function () {
    $('body').hide();
    var page = window.location.hash.slice(1);
    if (page == "") page = 'home';
    load_page(page, function(json) {
        var parsed = $.parseJSON(json);
        console.log(parsed);
        if (json.pagename == "" || json.pagename == null) {
            document.title = 'Page Not Found | The Other Half | freddum.com';
            $('body').fadeIn();
        } else {
            document.title = parsed.pagename + ' | The Other Half | freddum.com';
            $("#content").html(parsed.content);
            $('#header-navigation-ul a:Contains('+page+')').addClass('nav-selected');
            $('body').fadeIn();
        }    
    });

})();

Я переместил load_page в глобальное пространство имен, потому что мне нужно, чтобы оно было там.console.log(parsed) возвращает то, что кажется допустимым объектом json, но console.log(parsed.content) дает undefined.#content тоже не устанавливается.Есть идеи?Я буду рад провести любое тестирование.

Любая помощь очень ценится!

Answer 1

Поскольку запросы Ajax асинхронны , код, следующий за вызовом функции $.ajax, продолжает выполняться независимо от того, завершен запрос или нет, поэтому вы должны принять обратный вызов в качестве аргумента для load_page, то естьвызывается после завершения запроса:

function load_page (pagename, callback) {
    $.ajax({
        url: "/backend/index.php/frontend/pull_page/",
        type: "POST",
        data: {page: pagename},
        success: function (json) {
            var parsed = $.parseJSON(json);
            console.log(parsed);
            callback(parsed); //bingo
        },
        error: function (error) {
            $('#content').html('Sorry, there was an error: <br>' + error);
        }
    });
}

load_page(page, function(json) {
   console.log(json);
   if (json == false) {
      $('body').fadeIn();
   } else {
      document.title = json.pagename + ' | The Other Half | freddum.com';
      $("#content").html(json.content);
      $('#header-navigation-ul a:Contains('+page+')').addClass('nav-selected');
      $('body').fadeIn();
   }
});

Answer 2

Внутри определения функции load_page нет оператора return, по крайней мере напрямую, поэтому, выполнив var json = load_page(page);, вы получите json = undefined. В идеале вы должны немного перестроить свой код. Существует несколько способов сделать это, но вот один:

(function () {
    function mySuccess(json) {
        var parsed = $.parseJSON(json);
        console.log(json);
        console.log(parsed);
        document.title = parsed.pagename + " | The Other Half | freddum.com";
        $("#content").html(parsed.content);
        $("#header-navigation-ul a:Contains(" + page + ")").addClass("nav-selected");
        $("body").fadeIn();
    }
    function myFailure(error) {
        $('#content').html('Sorry, there was an error: <br>' + error);
        $("body").fadeIn();
    }
    function load_page(pagename, onSuccess, onFailure) {
        $.ajax({
            url: "/backend/index.php/frontend/pull_page/",
            type: "POST",
            data: {
                page: pagename
            },
            success: onSuccess,
            error: onFailure
        });
    }
    load_page(page, mySuccess, myFailure);
})();

Answer 3

Проблема заключается в том, что jQuery по умолчанию выполняет асинхронные вызовы ajax. Следовательно, следующий оператор выполняется даже до завершения вызова ajax после
var json = load_page (page) ;. Вы можете сделать вызовы синхронными, передав async: false в параметрах конфигурации и указав значение возврата в функции обратного вызова.

Answer 4

Это AJAX-вызов, так как код выполняется асинхронно. Вам нужно поместить console.log и любое другое использование переменной json в функцию успеха.

Answer 5

попробуйте console.log перед анализом, чтобы проверить, какие именно данные поступают. это действительно JSON

success: function (json) { console.log (JSON); var parsed = $ .parseJSON (json);