根据条件线性执行请求

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