上一个完成后的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) {

  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]);

    },

    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 download button once done

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

        // 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);

    }

  });

}