Question

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

http://example.com/api/task1.php - ＆gt;返回成功/失败标题 http://example.com/api/task2.php - ＆gt;返回成功/失败标题等...

这就是它将要做的事情。人提交值（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>

带进度条的JQuery多请求

1 个答案: