Question

我已经在我的一个块中进行了ajax调用但是我的问题是每次执行此块时，ajax调用不是按顺序执行的，而是每次粗体线在斜体线之后执行，但它应该第一次称ajax顺序进行。

我想知道为什么会出现这种行为，更不用说我是初学者了。

提前致谢！

if(pkgIdStr == 519 && !pkgFetched){
    var subscribableUnitEl =  document.getElementById('subscribableUnit');  
    var pkColEl = document.getElementById("pkCol");
    pkColEl.style.width = "50%";
    var suColEl = document.getElementById("suCol");
    suColEl.style.width = "50%";
    var pkDivEl = document.getElementById("pkDiv");
    pkDivEl.style.paddingLeft = "30%";
    subscribableUnitEl.style.display = "block";
    subscribableUnitEl.setAttribute("required","true");

     *var su_list = "";*
     $.ajax({
            url : '/user/ajax/getAvailableSUsforGenericKey.htm',
            data : 'scratchCardNumber ='+value,
            type : 'POST',
            dataType: 'text',
            success : function(data) {

                var json=JSON.parse(data);
                var jsonlist = json.allSU;
                var su_array = [];
                for(var i=0; i < jsonlist.length; i++){
                    var x=jsonlist[0].split(',')[1].split(': ')[1];
                    su_array.push(x);
                }
                su_list =su_array.toString();

                    },
            error: function (data) {
                $('#actionMessage').html("<p style='color: red'>cannot load the email - contact tech team please!</p>");}


            });

    **var availableSUStr =su_list ;**// registerInterface.getAvailableSUInSdcard();
                            //su to be fetched here..
    var availableSUnits = availableSUStr.split(",");
    var suOptions = subscribableUnitEl.options;
    suOptions.length = 0;
    suOptions[0] = new Option("Please Select One",-1);
    for(var j=1;j<=availableSUnits.length;++j) {
        var tokenArr = availableSUnits[j-1].split(":");
        if(tokenArr.length != 2)
            continue;
        suOptions[j] = new Option(tokenArr[1],tokenArr[0]);
    }
    pkgFetched = true;
    suOptions[0].selected=true;
    showAlert("Product key entered requires a package to be selected");
    return true;    
}

Answer 1

Ajax调用是异步的，即在不等待结果的情况下调用它。因此，在调用返回后，您想要完成的所有操作（按顺序），您需要输入成功函数。

但是，像Sparky提到的那样，也可以通过禁用异步行为来等待Ajax调用完成。在您的情况下，Ajax调用将是：

$.ajax({
        url : '/user/ajax/getAvailableSUsforGenericKey.htm',
        data : 'scratchCardNumber ='+value,
        type : 'POST',
        async: false,
        dataType: 'text',
        success : function(data) {

            var json=JSON.parse(data);
            var jsonlist = json.allSU;
            var su_array = [];
            for(var i=0; i < jsonlist.length; i++){
                var x=jsonlist[0].split(',')[1].split(': ')[1];
                su_array.push(x);
            }
            su_list =su_array.toString();

                },
        error: function (data) {
            $('#actionMessage').html("<p style='color: red'>cannot load the email - contact tech team please!</p>");}


        });

此Ajax调用之后的代码将在您的成功函数完成后执行。我个人不建议这样做，因为浏览器将一直挂起，直到Ajax请求完成。

Answer 2

Ajax请求是异步的。这意味着它们不是按顺序调用的。这里发生的事情是，您首先调用的请求在另一个之前完成。看一下回调模式，试着去理解它。然后，您可以了解为执行异步操作提供更清晰API的promises，然后最终继续执行async await，它是内部使用Promises的新ecmascript规范的一部分。

Answer 3

如果我正确理解了您的问题，则在该if块中的其余代码之后执行AJAX调用。发生这种情况是因为ajax请求不是即时的，一旦请求被发送出去，程序就会继续下一步。如果您需要ajax请求下面的代码，只有在有响应之后运行，那么您需要将该代码放在“success”函数中。

ajax调用没有按顺序进行，为什么？

3 个答案: