0

我正在使用 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 代码中的注释所示。我知道它在 if 条件下滞后，但对 jQuery AJAX 是新手，所以不知道在哪里以及如何使用它

4

2 回答 2

1

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

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

为此，您需要放置if或switch阻塞您的 ajax 调用。这将导致比你已经拥有的更深的嵌套。

我强烈建议将这种逻辑分解为单独的例程。拥有一个调用 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 调用将永远不会被命中......

于 2012-07-23T08:58:55.547 回答
1

好的，所以您想线性执行函数，但前提是满足某些条件？

为了使事情变得更容易，您必须将问题抽象一点。例如，找出所有请求的共同点和不同点。它们都有不同的 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();
}
于 2012-07-23T10:20:00.623 回答