0

jQueryAJAXリクエストを使用して動的にデータを取得しています。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);
                                        }
                                    });        
                                }
                            });      
                        }
                    });        
                }
            });     
        }
    }); 
}    ​

このコードは正常に機能しています！

しかし、ここで必要なのは、 ajaxコードのコメントに示されているように、 catidの値に基づいてajaxリクエストを実行したいということです。if条件が遅れていることはわかっていますが、jQuery AJAXは初めてなので、どこでどのように使用するかわかりません。

4

2 に答える 2

1

おそらくあなたが本当に望んでいるのは単純なasync: false部分だと思います-これにより、コードを進める前にajax呼び出しが完了します。

私はこの回答を更新しました。これは、後続のすべての呼び出しが起動しないようにする必要があるとは思わないためです。catid

これを行うには、ajax呼び出しを配置ifまたはブロックする必要があります。switchこれにより、すでに持っているよりもさらに深いネストが可能になります。

このロジックを別々のルーチンに分割することを強くお勧めします。この深いネストではなく、ajaxルーチンを呼び出す関数が1つあります。

続行する前にajaxルーチンが成功を待機するように設定asyncします。false

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 に答える