上一个完成后的ajax执行功能

Question

我有一个在单击提交后运行的进度条。

然后应用程序将处理后台任务并更新进度条。

问题是如何在进度条达到 100% 后显示下载按钮而不是在进度条开始更新时显示按钮？

$('form').on('submit', function(event) {

  event.preventDefault();

  var formData = new FormData(this);

  // add task status elements

  div = $('<div class="progress"><div></div><div>0%</div><div>...</div></div>');

  $('#progress').append(div);

  // progress bar

  var nanobar = new Nanobar({

    bg: '#03adff',

    target: div[0].childNodes[0]

  });

  $.ajax({

    type: 'POST',

    url: '/longtask',

    data: formData,

    processData: false,

    contentType: false,

    success: function(data, status, request) {

      status_url = request.getResponseHeader('Location');

      update_progress(status_url, nanobar, div[0]);

    },

    complete: function() {

      $("#dl").css("display", "block");

    },

    error: function() {

      alert('Unexpected error');

    }

  });

})

function update_progress(status_url, nanobar, status_div) {

  // send GET request to status URL

  $.getJSON(status_url, function(data) {

    percent = parseInt(data['current'] * 100 / data['total']);

    nanobar.go(percent);

    $(status_div.childNodes[1]).text(percent + '%');

    $(status_div.childNodes[2]).text(data['status']);

    if (data['state'] != 'PENDING' && data['state'] != 'PROGRESS') {

      if ('result' in data) {

        // show result

        $(status_div.childNodes[3]).text('Result: ' + data['result']);

      } else {

        // something unexpected happened

        $(status_div.childNodes[3]).text('Result: ' + data['state']);

      }

    } else {

      setTimeout(function() {

        update_progress(status_url, nanobar, status_div);

      }, 1000);

    }

  });

}

Answer 1

假设#dl您是下载按钮。您可以将其移动$("#dl").css("display", "block");到您的update_progress功能中：$('form').on('submit', function(event) {&nbsp; event.preventDefault();&nbsp; var formData = new FormData(this);&nbsp; // add task status elements&nbsp; div = $('<div class="progress"><div></div><div>0%</div><div>...</div></div>');&nbsp; $('#progress').append(div);&nbsp; // progress bar&nbsp; var nanobar = new Nanobar({&nbsp; &nbsp; bg: '#03adff',&nbsp; &nbsp; target: div[0].childNodes[0]&nbsp; });&nbsp; $.ajax({&nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; url: '/longtask',&nbsp; &nbsp; data: formData,&nbsp; &nbsp; processData: false,&nbsp; &nbsp; contentType: false,&nbsp; &nbsp; success: function(data, status, request) {&nbsp; &nbsp; &nbsp; status_url = request.getResponseHeader('Location');&nbsp; &nbsp; &nbsp; update_progress(status_url, nanobar, div[0]);&nbsp; &nbsp; },&nbsp; &nbsp; error: function() {&nbsp; &nbsp; &nbsp; alert('Unexpected error');&nbsp; &nbsp; }&nbsp; });})function update_progress(status_url, nanobar, status_div) {&nbsp; // send GET request to status URL&nbsp; $.getJSON(status_url, function(data) {&nbsp; &nbsp; percent = parseInt(data['current'] * 100 / data['total']);&nbsp; &nbsp; nanobar.go(percent);&nbsp; &nbsp; $(status_div.childNodes[1]).text(percent + '%');&nbsp; &nbsp; $(status_div.childNodes[2]).text(data['status']);&nbsp; &nbsp; if (data['state'] != 'PENDING' && data['state'] != 'PROGRESS') {&nbsp; &nbsp; &nbsp; if ('result' in data) {&nbsp; &nbsp; &nbsp; &nbsp; // Show download button once done&nbsp; &nbsp; &nbsp; &nbsp; $("#dl").css("display", "block");&nbsp; &nbsp; &nbsp; &nbsp; // show result&nbsp; &nbsp; &nbsp; &nbsp; $(status_div.childNodes[3]).text('Result: ' + data['result']);&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; // something unexpected happened&nbsp; &nbsp; &nbsp; &nbsp; $(status_div.childNodes[3]).text('Result: ' + data['state']);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; setTimeout(function() {&nbsp; &nbsp; &nbsp; &nbsp; update_progress(status_url, nanobar, status_div);&nbsp; &nbsp; &nbsp; }, 1000);&nbsp; &nbsp; }&nbsp; });}