處理多個Ajax請求

我正在開發一個需要多個Ajax請求的應用程序，這樣Option2只有在Button2將被點擊並返回響應時纔可用。同樣，只有當Button3被點擊時，Option3纔可用。以下是代碼的一般結構。我正在構建應用程序php & mysql。處理多個Ajax請求

$("#button1").click(function() { 
    $.ajax({ 
     type: "POST", 
     url: "url-1", 
     data: { id: //some-id }, 
     success: function(response) { 
      $('.menu-right').html(response); 
      $(".button2").click(function() { //button2 is created when the above response is printed as html 
       $.ajax({ 
        type: "POST", 
        url: "url-2", 
        data: { id: this.id }, 
        success: function(response) { 
         $('.menu-right-jump').html(response); 
         $('.button3').click(function() { ////button3 is created when the above response is printed as html 
          $.ajax({ 
           type: "POST", 
           url: "url-3", 
           data: { id: this.id }, 
           success: function(response) { 
           // some things to do 
           }, 
           error: function(error) { 
            alert("Error"); 
           } 
          }); 
         }); 
        }, 
        error: function(error) { 
         alert("Error"); 
        } 
       }); 
      }); 
     }, 
     error: function(error) { 
      alert("Error"); 
     } 
    }); 
});

目前，一切正常。該應用程序將最多爲10,000個用戶。我只是想知道是否有更好的方法來完成這個或者我可以使用的任何框架。

另外：使用這種方法和方法來清除這些問題可能會出現什麼問題。

來源

2013-11-01 xan

這是非常醜陋的代碼...爲什麼你不能將這些Ajax請求封裝到單個函數中？ –

@BradM：我只是一個初學者。我只是看免費教程，然後嘗試完成任務。你能不能舉一個封裝它們作爲單個函數的例子？ – xan

有一個更乾淨的方式來做到這一點，用jQuery。使用.ready函數。

$("#button1").click(function() { 
    $.ajax({ 
     type: "POST", 
     url: "url-1", 
     data: { id: //some-id }, 
     success: function(response) { 
      $('.menu-right').html(response); 
     }, 
     error: function(error) { 
      alert("Error"); 
     } 
    }); 
}); 

//When I'm ready... provide a click event 
$(".button2").ready(function(){ 
    $(".button2").click(function() { //button2 is created when the above response is printed as html 
     $.ajax({ 
      type: "POST", 
      url: "url-2", 
      data: { id: this.id }, 
      success: function(response) { 
       $('.menu-right-jump').html(response); 
      }, 
      error: function(error) { 
       alert("Error"); 
      } 
     }); 
    }); 
}); 
$(".button2").ready(function(){ 
    $('.button3').click(function() { ////button3 is created when the above response is printed as html 
     $.ajax({ 
      type: "POST", 
      url: "url-3", 
      data: { id: this.id }, 
      success: function(response) { 
       // some things to do 
      }, 
      error: function(error) { 
       alert("Error"); 
      } 
     }); 
    }); 
});

問題以你的方式達到目的。由於太多nesting（例如，如果你需要增加4個按鈕），它可能會導致太多......技術債務，這是很難保持。

避免創建深層嵌套的if-then語句，因爲它們難以閱讀且易於維護。 source

你可以用這個走得更遠，更好地封裝每個Ajax請求到一個單一的功能，編寫自己的jQuery callback。

來源

2013-11-01 22:04:14 Killrawr

我不知道。已經像那個不存在的任意對象那樣工作了。我必須嘗試一下。 – AwokeKnowing

建議您不要使用'.html（）'使用'.append（）'並將'HTML'換成'jQuery'，這樣可以讓'jQuery'更好地檢測新元素。 – Killrawr

你也可以使用jQuery的.on功能，不必窩那些

$('body').on('click' ,'.button2', doButton2request); 
$('body').on('click' ,'.button3', doButton3request); 

$("#button1").click(doButton1request) 

function doButton1request() 
{ 
    do ajax and on success put in the new button 
} 

function doButton2request() 
{ 
    do ajax and on success put in the new button 
} 

function doButton3request() 
{ 
    do ajax and on success do "some things to do" 
}

上的功能電線了事件，以便每當有人點擊任何東西（「體」內），如果類。 button2例如，它調用那個（this）是匹配的項目的函數。您可以根據需要添加和刪除按鈕或.button2類。你也可以暫時停止這些事件的發射。

所以一般的想法是，只要你有可點擊的項目，不會在應用程序的開始存在，你可以設置一個.on事件。或者，您可以讓項目不會收到點擊，直到他們添加了另一個類，如「.active」或其他。

來源

2013-11-01 22:06:50 AwokeKnowing

處理多個Ajax請求

回答

相關問題