根據條件線性執行請求

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

---

要做到這一點，你需要將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調用將永遠不會被擊中反正...

Answer 2

好，所以你想線性執行函數，但只有在滿足某些條件的情況下才行。

爲了使事情更容易，您必須將問題抽象一點。例如，找出所有請求的共同點以及它們的不同之處。他們都有不同的網址，條件和成功。

您可以創建一個Ajax調用配置對象數組，迭代它們並使用.pipe()^[docs]對它們進行線索化。如果您返回最終承諾對象，那麼在所有調用完成後，您也可以執行一個功能。

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(); 
}