来自自定义 jQuery AJAX 函数的 Javascript 回调答案

【问题标题】：Javascript callback from custom jQuery AJAX function来自自定义 jQuery AJAX 函数的 Javascript 回调
【发布时间】：2010-12-24 05:52:19
【问题描述】：

我有这个 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，当它到达 json.pagename 时 js 崩溃。第一个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 移动到全局命名空间中，因为我需要它在那里。 console.log(parsed) 返回似乎是有效的 json 对象，但 console.log(parsed.content) 产生 undefined。 #content 也没有设置。有任何想法吗？我很乐意做任何测试。

非常感谢任何帮助！

【问题讨论】：

标签： javascript jquery ajax json callback

【解决方案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();
   }
});

【讨论】：

你是个天才。我认为它是异步的将是一个问题。非常感谢！
@Fred 你的意思是你认为这不会有问题？不客气！ :)
我有一种下沉的感觉，它行不通，但如果不增加我的代码负载并多次复制代码，我不知道有什么办法，晚餐后我会接受你的回答。谢谢！

【解决方案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);
})();

【讨论】：

【解决方案3】：

这个问题是因为 jQuery 默认异步发出 ajax 调用。因此，下一条语句甚至在 ajax 调用完成之前执行
var json = load_page(page);. 您可以通过在配置参数中传递 async:false 并在回调函数中处理 retun 值来使调用同步。

【讨论】：

+1 但使用 aysnc:false 会在 AJAX 调用运行时停止 javascript，这不是预期的效果。
是的，我总是更喜欢回调......但只是想提供有关可用选项的信息

【解决方案4】：

在解析之前尝试 console.log 以检查究竟是什么数据。它是有效的json

成功：函数（json）{ 控制台.log(json); var 已解析 = $.parseJSON(json);

【讨论】：

【解决方案5】：

这是一个AJAX调用，代码是异步完成的。您需要将 console.log 和 json 变量的任何其他用途放在成功函数中。

【讨论】：