JQuery與進度條多個請求

Question

我想弄清楚如何在JQuery中編寫進度條並執行多個任務。我已經設定的任務，例如：

http://example.com/api/task1.php - >返回成功/失敗頭 http://example.com/api/task2.php - >返回成功/失敗頭 等等

下面是它會做。人提交價值（IP地址），那麼我有約10個不同的「檢查」服務。每次檢查後，/ api /將返回成功標題，然後我想要進度條更新，10％，20％等。

我在猜這樣的事情，這是關閉嗎？

$(function() { 
$("#form").submit(function(){ 
    var url= $("#url").val(); 
    var submitvalue= 'url='+ url; 
     $.ajax({ 
     type: "POST", 
     url: "/api/task1.php", 
     data: submitvalue, 
     cache: false, 
     success: function(html){ 
      event.preventDefault(); 
      progressbar(10); 
      runtask2(); 
     } 
    } 
    } 
} 

有沒有更優雅的解決方案？

Answer 1

這就是我想出來的，這已經足夠通用於其他人使用。它確實使用JQuery和JQuery UI

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 


<script> 

var did; // global variable 

// Step 1 - first check 

$("#signup1").submit(function(event) { 

    // Stop form from submitting normally 
     event.preventDefault(); 

    // Get user value from URL Field in form signup1 
     url = $("#url").val(); 

    // Page to submit request to 
     page = "/scripts/signup/1.php"; 

    // Set progress bar status 
     $('#status').text('Performing Task 1..'); 
     $('#progressbar').progressbar({ value: 10 }); 

    // Send the data to the page 
     var posting = $.post(page, { url: url }); 

     posting.done(function(data) { 
      console.log(data); // for debugging 
      did = (data); // this is needed to perform the other checks 

    // move progress bar a little more 
     $('#progressbar').progressbar({ value: 20 }); 

    // move on to next process 
     check2(); 

    }); 
}); 

// additional checks formatted like this... 

function check2() { 
    $('#status').text('Performing Task 2..'); 
    page = "/scripts/signup/2.php"; 
    var posting = $.post(page, { id: did }); 

    posting.done(function(data) { 
     console.log(data); // debugging 
     var content = $(data); 
     $('#progressbar').progressbar({ value: 30 }); 
     }) 
    } 

</script>