getJSON jQuery以错误的顺序工作

时间:2012-10-05 09:01:00

标签: jquery ajax razor

我有一个jQuery / JavaSCript函数:

function CheckPostcode() {
    // if checkbox is checked then hide and return true
    // if checkbox is not checked (visible or not) then check postcode is known via Ajax call
    // if not known then display the checkbox and return false
    //
    if ($('#perinatalWomanView_AcceptUnknownPostcode').is(':checked')) {
        $("#AcceptUnknownPostcode").hide();
        return true;
    }
    $.getJSON('@Url.Action("PostcodeCheck", "AjaxValidation", new { area = "" })', { postcode: $('#perinatalWomanView_Postcode').val() }, function (result) {
        if (result.postcodeFound == true) {    // executes SECOND
            $("#AcceptUnknownPostcode").hide();
            return true;
        }
        $("#AcceptUnknownPostcode").show();
        return false;
    });
    return false;    // executes FIRST
} //CheckPostcode

这似乎是正确的,但AJAX getJSON响应不按顺序工作(我使用Firebug并单独发出警报来检查)。我已经注释了代码以显示执行顺序。 Ajax调用正确执行。

我错过了什么 - 谢谢。

4 个答案:

答案 0 :(得分:4)

这是正常行为

这是正常行为,因为AJAX本质上是异步,这就是AJAX中的 A 所代表的。

这意味着从外部资源(服务器)请求内容将并行工作,当收到结果时,您可以处理它们,但不能指望它们按顺序工作。

错误修复

对于有序的人来说,有一个简单(和坏)修复:使AJAX调用同步。 $.getJSON等于$.ajax它只有一些预定义的参数; $.ajax接受的其中一个参数async默认为true,将$.getJSON调用替换为等效的$.ajax调用,只需添加async: false参数即可。

BTW。:jQuery已经弃用了这个参数,我不是最新的当前jQuery版本,但它可能已经从API中删除了。

很容易修复

否则(推荐)了解事件驱动的环境。它们不依赖于顺序的东西,但它们提供callback函数在事件被触发时执行 - 这意味着您需要处理的数据在声明时不可用但在稍后时刻。

如果您为callback / click / hover事件声明了focus,则jQuery会将callback存储在某个位置,并且只在以后执行它(如果)事件被触发。它不会立即执行,如果您没有click / hover / focus任何内容,它根本不会执行它。

与AJAX一样,你给jQuery一个回调函数,在服务器完成传输响应后立即运行。

BTW:这个修补程序在架构上并不容易在任何地方使用,如果只有一层处理数据,它可以工作,如果有更多和逻辑涉及它会变得混乱。

更复杂的修复

这应该让你直截了当,再也不会偏离它。

您可以根据自己的喜好创建自己的活动。附加一个事件处理程序,以便在触发该事件时执行。

您只需告诉AJAX请求触发该事件并传递事件变量。您已经设置的事件处理程序将被调用,其余的就是诗歌。

$('body').bind('my_event', function(event) {
    results_from_ajax = event.data;
});

$.getJSON(function(server_results) {
    $('body').trigger('my_event', server_results);
});

如果查看trigger函数,您会看到可以定义一些额外的参数发送给事件处理程序。

如果查看事件对象的结构,它包含event.type - 事件的名称,event.target - 触发它的对象,event.data - 触发传递的数据,以及许多其他有用的(或不)信息。

可能是最好的修复

我还没有看到一些较新的功能(不深入),据我所知,它们提供了一些基础设施,用于对某些尚未提供的信息应用操作将应用哪些操作数据可用后的某个时间。

http://api.jquery.com/category/deferred-object/

我无法解释这一点,因为我没有使用它,除了上面可能错误的解释之外没有理解它。如果有人有这方面的要点,请启发我们所有人。

答案 1 :(得分:0)

$ .ajax是异步调用。因此它不会阻止以下代码的执行。这就是为什么{$ 1}}将在$ .ajax完成之前执行的原因。

答案 2 :(得分:0)

AJAX调用异步执行,这意味着getJSON函数立即返回并转到下一行代码。您将不得不重新考虑您的逻辑,因为您的外部函数将在AJAX完成之前返回。

更好的想法是拥有一个从完整的处理程序中调用的完成函数。

答案 3 :(得分:0)

最后一个return false;超出了您的回调功能。这就是它首先执行的原因,我认为你不应该从这个函数返回true或false,但是当你收到结果时可能会对DOM做一些事情。