处理多个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请求

回答

相关问题