Question

我使用jQuery AJAX请求动态获取数据。 Ajax调用是嵌套的，它们在每个先前请求的success函数中调用。我这样做是为了不对服务器施加太多负担。只有在前一个请求已完成 成功时才会发送下一个请求。

这是ajax代码

function showforLanguagetra(option, catid, meta)
{
    $.ajax({       ///execute only if catid = 1,3,6,8
        type:"GET",
        url: "/Ajax1111",
        data: {
            opt: option,
            cid: catid,
            mta: meta
        },
        success: function(data){
            $("#1111").html(data);

            $.ajax({           ///execute only if catid = 5,7,9
                type:"GET",
                url: "/Ajax2222",
                data: {
                    opt: option,
                    cid: catid,
                    mta: meta
                },
                success: function(data){
                    $("#2222").html(data);


                    $.ajax({            ///execute only if catid = 2,5,4,8
                        type:"GET",
                        url: "/Ajax3333",
                        data: {
                            opt: option,
                            cid: catid,
                            mta: meta
                        },
                        success: function(data){
                            $("#3333").html(data);


                            $.ajax({               ///execute only if catid = 6,4,8,9,0
                                type:"GET",
                                url: "/Ajax4444",
                                data: {
                                    opt: option,
                                    cid: catid,
                                    mta: meta
                                },
                                success: function(data){
                                    $("#4444").html(data);


                                    $.ajax({              ///execute only if catid = 2,3,5,7,4
                                        type:"GET",
                                        url: "/Ajax5555",
                                        data: {
                                            opt: option,
                                            cid: catid,
                                            mta: meta
                                        },
                                        success: function(data){
                                            $("#5555").html(data);
                                        }
                                    });        
                                }
                            });      
                        }
                    });        
                }
            });     
        }
    }); 
}

此代码工作正常！

但是这里需要的是，我想根据 catid 中的值执行ajax请求，如ajax代码中的注释所示。我知道它有条件但是对于jQuery AJAX来说是新手，所以不知道在哪里以及如何使用它

Answer 1

我想也许你真正想要的只是async: false部分 - 这使得ajax调用在完成代码之前完成。

我更新了这个答案，因为我不相信您希望所有后续调用都不会触发，而是应该按顺序触发并依赖于catid

要执行此操作，您需要在ajax调用周围放置if或switch个阻止。这将导致比您已有的更深的嵌套。

我强烈建议将这种逻辑分解为单独的例程。有一个函数可以调用ajax例程而不是深度嵌套。

将async设置为false以使ajax例程等待成功，然后再继续。

function callAjax( service , option catid , meta ) {
   var ret = {data:false};

    $.ajax({       
        type:"GET",
        url: service,
        async: false,
        data: {
            opt: option,
            cid: catid,
            mta: meta
        },
        success: function(data){
            ret.data = data;
        });

    return ret;
}


function showforLanguagetra(option, catid, meta) {
    var successData;

    if ( catid == 1 || catid == 3 || catid == 6 || catid == 8) {
        successData = callAjax( '\Ajax1111' , option , catid, meta ).data
        if ( successData )
            $("#1111").html(successData);
    }

    if ( catid == 5 || catid == 7 || catid == 9) {
        successData = callAjax( '\Ajax2222' , option , catid, meta ).data
        if ( successData )
            $("#2222").html(successData);
    }

    if ( catid == 2 || catid == 5 || catid == 4 || catid == 8) {
        successData = callAjax( '\Ajax3333' , option , catid, meta ).data
        if ( successData )
            $("#3333").html(successData);
    }

    // etc etc

}

请注意，您的代码没有意义，好像catid不等于1,3,6或8，那么以后的ajax调用永远不会被击中......

Answer 2

好的，所以你想线性地执行函数，但只有在满足某些条件的情况下才能执行？

为了简化操作，您必须稍微提出问题。例如，弄清楚所有请求的共同点和不同之处。它们都有不同的URL，条件和成功。

您可以创建一个Ajax调用配置对象数组，迭代它们并使用.pipe() ^[docs]对它们进行线性化。如果返回最终的promise对象，则在完成所有调用后也可以执行一个函数。

var ajax_config = [{
       url: '/Ajax1111', // URL
       // a function accepting catid and returning true or false
       condition: function(catid) { 
           return catid === 1 || catid === 3 || ...;
       },
       // function to be executed when call was successful
       success: function(data) {
           $("#1111").html(data);
       }
   },
   // some for all the other calls
];

function showforLanguagetra(option, catid, meta) {
    var queue = new $.Deferred();

    // iterate over the configuration objects and add them to the
    // queue if the condition is met 
    $.each(ajax_config, function(i, config) {
        if(config.condition(catid)) {
            queue = queue.pipe(function() {
                return $.get(config.url, {
                    opt: option,
                    id: catid,
                    mta: meta
                }).done(config.success);
            });
        }
    });
    queue.resolve();
}

根据条件线性执行请求

2 个答案: