來自自定義jQuery AJAX函數的JavaScript回調

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 （我認為）。

我知道我正在抓着稻草，如果這行得通，那將是極度的，但事實並非如此。 老實說，我不知道如何為這種情況編寫回調函數。

編輯 ：這是我現在更新的代碼，也不起作用。

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移到了全局命名空間'cos中，我需要它在那兒。 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）;。 您可以通過在config參數中傳遞async：false並在回調函數中處理retun值來使調用同步。

Answer 4

在解析之前嘗試console.log來檢查確切的數據。 它是有效的json嗎

成功：函數（json）{console.log（json）; var parsed = $ .parseJSON（json）;

Answer 5

這是一個AJAX調用，例如，代碼是異步完成的。 您需要將console.log以及json變量的任何其他用法放入成功函數中。