在文档准备好之前从服务器获取AJAX数据(jQuery)

Get AJAX data from server before document ready (jQuery)

本文关键字：数据 AJAX jQuery 获取 服务器 准备好 文档      更新时间：2023-09-26

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

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

但是我有奇怪的行为，当我调试页面时，我可以看到方法MakingInterfaceUsingGlobalArray首先工作，就在我通过方法UseAjaxQueryForFillGlobalArray获得数据后，我没有加载数据的新接口(html选项)。

如果我这样做:

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

然后在Firefox中工作正常，但在其他浏览器中第一次加载时不正确(例如通过链接进入这个页面)。但是如果我按F5刷新，我有正确的用户界面，通过AJAX加载到全局JS数组。

如何修复?也许我用错了?

注释后添加:

这是我的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.     
        }
    });
}

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

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

这就像让这篇文章起死回生，但是我今天遇到了同样的问题，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，之后，我得到了内容。

如果有人还在寻找这个问题的答案

相关文章：