JQuery 带进度条的多个请求

Question

我想弄清楚如何在 JQuery 中编写进度条并执行多项任务。我已经编写了任务，例如：

http://example.com/api/task1.php -> returns 成功/失败 header http://example.com/api/task2.php -> returns 成功/失败 header 等...

这是它的作用。人提交值（IP 地址），然后我有大约 10 个不同的 "checks" 服务做。每次检查后，/api/'s 将 return 成功 header 然后我希望进度条更新，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>

JQuery 带进度条的多个请求

JQuery Multiple Request with Progress Bar

ajax

url

jquery

progress-bar