通过 $.ajax 和 $.get/$.post 填充关联数组的区别答案

【问题标题】：Differences populating an associative array through $.ajax and $.get/$.post通过 $.ajax 和 $.get/$.post 填充关联数组的区别
【发布时间】：2012-11-28 04:41:05
【问题描述】：

我尝试填充全局变量 selectedDates 认为是第一个函数，但是当 我尝试获取一些值时它失败了，例如 selectedDates['1/23/2013']

尝试使用 $.ajax 而不是 $.get 后，我可以获得像 selectedDates['1/23/2013'] 这样的值。

如果它们都填充一个外部 var the_selected_dates 并返回到 set selectedDates，那么区别在哪里？

var selectedDates = {};

使用$.get 的函数失败：

function getSelectedDates_fails(lead_id, month) {
    var the_selected_dates = {};
    $.get(
            window.location.href,
            {
                gf_lm_ajax : 1,
                get : 'lead_reminder_get_dates',
                lead_id : lead_id,
                month : month,
                nonce_gf_lm_ajax : gf_lmJsVars.nonce_gf_lm_ajax

            },
    function(output) {
        $.each(output.reminders, function(n, val) {
            the_selected_dates[val.date] = val.date;
        });
    }, 'json');
    return the_selected_dates;
}
selectedDates = getSelectedDates_fails(35, 12); console.debug(selectedDates);

调试数据

使用$.ajax 的函数有效：

function getSelectedDates_works(lead_id, month) {
    var the_selected_dates = {};
    $.ajax(
            {
                url : window.location.href,
                dataType : 'json',
                data : {
                    gf_lm_ajax : 1,
                    get : 'lead_reminder_get_dates',
                    lead_id : lead_id,
                    month : month,
                    nonce_gf_lm_ajax : gf_lmJsVars.nonce_gf_lm_ajax
                },
                async : false,
                success : function(output)
                {
                    $.each(output.reminders, function(n, val) {
                        the_selected_dates[val.date] = val.date;
                    });
                }
            });
    return the_selected_dates;
}
selectedDates = getSelectedDates_works(35, 12); console.debug(selectedDates);

调试数据

【问题讨论】：

是的，我正在使用一个对象{}来模拟它。
Ajax 默认是异步的，你的 $.get 在函数返回空的the_selected_dates 对象之前不会完成。

标签： javascript jquery associative-array

【解决方案1】：

当您正在运行$.ajax同步时，$.get 不是。

这就是为什么getSelectedDates_fails() 返回的速度比您从服务器获得响应的速度要快，因此返回一个空对象{}。

您在selectedDates 中看到的是在请求异步完成之前对象的状态。

您可以使用$.ajaxSetup() 全局更改所有$.ajax 调用的行为。但是，我不建议将 async 设置为 false。

【讨论】：

这是真的，但更好的答案会解释这意味着什么
@JuanMendes 或者可能是数百个具有相同问题的问题之一的链接
@alexander、JuanMendes、KevinB、Easy man。在接受一个答案之前，我必须进行测试。我给了所有人一票，因为所有人都指向synchronicity 方面...微笑:)

【解决方案2】：

您的$.ajax 中有aysnc: false，这是您无法直接使用$.get 启用的设置——您必须使用$.ajaxSetup。不过，这可能不是您想要做的事情，但如果 ajax 请求异步运行，则在 ajax 请求完成之前到达return the_selected_dates;。相反，您必须在回调中进行调试。

【讨论】：

【解决方案3】：

当您设置async: false 时，您的成功处理程序将在主函数返回之前首先运行；这就是它起作用的原因。但是，不推荐这样做，因为它会在执行呼叫时挂起您的浏览器。

您应该以异步方式执行此操作，通过将回调函数传递给您的 getSelectedDates_works() 函数，该函数在处理结果时被调用。这样，浏览器就可以在请求和响应之间“休息”。

function getSelectedDates_works(lead_id, month, cb) 
{
    $.ajax({
        // ...
        success: function(output) {
            var the_selected_dates = [];
            $.each(output.reminders, function(n, val) {
                 the_selected_dates[val.date] = val.date;
            });
            // perform callback
            cb(the_selected_dates);
        }
    });
}

getSelectedDates_works(123, 456, function(dates) {
    // do stuff with dates here
});

【讨论】：

【解决方案4】：

您应该异步获取数据，并确保在您决定对返回的数据做某事时完成 ajax 函数：

function getSelectedDates(lead_id, month) {
    return $.ajax({
        url: window.location.href,
        dataType: 'json',
        data: {
            gf_lm_ajax: 1,
            get: 'lead_reminder_get_dates',
            lead_id: lead_id,
            month: month,
            nonce_gf_lm_ajax: gf_lmJsVars.nonce_gf_lm_ajax
        }
    });
}

getSelectedDates(35, 12).done(function(output) {
    var the_selected_dates = {};
    $.each(output.reminders, function(n, val) {
        the_selected_dates[val.date] = val.date;
    });
    console.log(selectedDates);
});

【讨论】：

很好地使用 Deferred :) +1