在文档准备好之前从服务器获取 AJAX 数据（jQuery）答案

【问题标题】：Get AJAX data from server before document ready (jQuery)在文档准备好之前从服务器获取 AJAX 数据（jQuery）
【发布时间】：2013-05-10 12:06:30
【问题描述】：

我想从服务器获取一些数据并将其写入 JavaScript 中的全局数组。然后在准备好的文档中，我想使用这个数组来创建一些新元素（选项）。我应该有这个数据的全局数组，因为在第一次加载后客户端可以使用这个数据修改用户界面。

$(document).ready(function () {
    UseAjaxQueryForFillGlobalArray();
    MakingInterfaceUsingGlobalArray();       
});

但是我有奇怪的行为，当我调试页面时，我可以看到该方法 MakingInterfaceUsingGlobalArray 首先工作，并且在我通过 AJAX 使用方法 UseAjaxQueryForFillGlobalArray 获取数据之后，我没有加载数据的新界面（html 选项）。

如果我这样做：

UseAjaxQueryForFillGlobalArray();
$(document).ready(function () {     
    MakingInterfaceUsingGlobalArray();       
});

然后在 Firefox 中工作正常，但在另一个网络浏览器中第一次加载不正确（例如通过链接转到此页面）。但是如果我按 F5 刷新，我有正确的用户界面，通过 AJAX 加载到全局 JS 数组。

如何解决？也许我使用了完全不正确的方式？

在 cmets 之后添加：

这是我的 ajax 函数：

function UseAjaxQueryForFillGlobalArray(){
    var curUserId = '<%= Master.CurrentUserDetails.Id %>';
    var curLocale = '<%= Master.CurrentLocale %>';
    $.ajax({
        type: "POST",
        url: "/segment.aspx/GetArrayForCF",
        data: '{"userId":"' + curUserId + '","curLocale":"' + curLocale + '"}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            //here is I doing parse my string from server and fill arrays.     
        }
    });
}

【问题讨论】：

您忘记将链接实际添加到您的示例中。
向我们展示您的 jQuery ajax 代码。有一个属性 (async) 可能是您需要的。
附注：对于初始页面渲染，我建议您在单个请求中传输所需的所有数据，而不是加载一个基本上“空白”的页面，然后通过 ajax 将数据加载到其中。
我已经添加了ajax功能。

标签： javascript jquery ajax document-ready

【解决方案1】：

我认为问题在于您不确切知道第一个函数何时返回，因为它是异步的。所以你应该只在回调中使用数组

function UseAjaxQueryForFillGlobalArray() {
    // make the call
    $.post(url, data, function() {
        // let's be sure that the dom is ready
        $(document).ready(function () {    
            // use the array
            MakingInterfaceUsingGlobalArray();      
        }
    }
}();// invoke the function

【讨论】：

谢谢！但是我使用了 $.ajax 而不是 $.post，因为我从服务器收到了 500 错误。

【解决方案2】：

就像是把这个帖子从死里复活了，但是我今天也遇到了同样的问题，jQuery 1.6 以上的版本有这个能力：

https://api.jquery.com/jquery.holdready/

我是这样使用它的：

$.holdReady(true);
var remoteJSONContent = null;
$.getJSON("http://www.example.com/remote.json", function(data) {
    remoteJSONContent = data;
    $.holdReady(false);
});

$(document).ready(function(){
    console.log(remoteJSONContent);
});

不使用holdReady，我得到了null，之后，我得到了内容。

对于仍在寻找答案的任何人。

【讨论】：