Question

在我的点击事件中，我正在尝试打开一个bootstrap模式。 Modal有一些值，我试图通过getJSON从ajax调用获得。问题是当jQuery函数结束时，getJSON终于被触发了。

这是我的代码：

$('.poplinks').popover().parent().on('click', '.insert-submission', function () {
            var baKey = 8701;
            var obj;

            $.getJSON('/urltogetobjectwithvalue/', {id: baKey}, function (result) {
                debugger; //it comes here at last after modal('show') executes
                obj = result;
            });

            debugger; //first it come here
            $("#span_unk_sub_baid").html(baKey);
            if (obj !== undefined)
                $("#span_unk_sub_baid").append(' Eff Date: ' + obj.EffectiveDate);

            $('#dialog_ins_purc').modal('show'); //now it will go to $.getJSON
        });

我想显示一些我从JSON调用获得的值。加载模态后，它将获取值。我如何确定，json调用是按照我想要的顺序进行的。请帮忙。

Answer 1

JavaScript是一种事件驱动的语言，这意味着它可以异步工作

Ajax - 是以异步方式访问服务器的方式。

像getJSON这样的函数以异步方式工作（使用AJAX） - 这意味着它不会阻塞整个脚本，直到它从服务器获得结果 - 它会启动一个动作（在这种情况下请求资源来自每当某个事件发生时（在这种情况下请求到达终点 - 即你从服务器得到响应），接收一个要调用的函数（通常称为＆＃34;回调＆＃34;）

如果它按照您想象的方式工作 - 它没有必要像你那样传递函数而你可以改写：

obj = $.getJSON('/urltogetobjectwithvalue/', {id: baKey}); //WRONG CODE - DON'T USE IT

在this question中，Javascript中的异步编程（使用setTimeout也可以异步工作）有一个很好的解释

为了按照我猜你想要的顺序得到你应该做的事情：

$('.poplinks').popover().parent().on('click', '.insert-submission', function () {
    var baKey = 8701;
    var obj;

    function afterResponse(){
        $("#span_unk_sub_baid").html(baKey);
        if (obj !== undefined)
            $("#span_unk_sub_baid").append(' Eff Date: ' + obj.EffectiveDate);
        $('#dialog_ins_purc').modal('show');
    }

    $.getJSON('/urltogetobjectwithvalue/', {id: baKey}, function (result) {
        obj = result;
        afterResponse();
    });
});

Answer 2

而不是使用短手

$.ajax({
    type:'GET',
    async:false,
    url:"your url",
    dataType:'JSON',
    data:{id,baKey}
    success:function(result)
    {
      debugger;obj = result;
    }
});

Async默认设置为true。所以你的js在这个ajax调用之后执行代码并且不等待服务器返回响应。如果它被设置为false，则js等待服务器用数据回复并继续执行。

$ .getJSON终于被解雇了

2 个答案: