javascript - 在 Ajax 请求开始和完成时显示和隐藏元素(状态栏)

Question

我有一个通过 Ajax 上传照片的表单，当您开始请求时状态栏会出现并且工作正常。问题是当请求结束时，该栏保持事件状态并出现缩略图。如果发出另一个请求，该栏应该会重新出现。

我想在请求完成时隐藏栏，并尝试了几种方法但都没有用，这是我的代码:

   //jQuery Ajax to Post form data
   $.ajax({
    url : post_url,
    type: "POST",
    data : form_data,
    contentType: false,
    cache: false,
    processData:false,
    xhr: function(){
     //upload Progress
     var xhr = $.ajaxSettings.xhr();
     if (xhr.upload) {
      xhr.upload.addEventListener('progress', function(event) {
       var percent = 0;
       var position = event.loaded || event.position;
       var total = event.total;
       if (event.lengthComputable) {
        percent = Math.ceil(position / total * 100);
       }
       //update progressbar
       $(progress_bar_id + " .progress-bar").css("width", + percent +"%");
       $(progress_bar_id + " .status").text(percent +"%");
      }, true);
     }
     return xhr;
    },
    mimeType:"multipart/form-data"
   }).done(function(res){ //
    $(my_form_id)[0].reset(); //reset form
    $(result_output).html(res); //output response from server
    submit_btn.val("Enviar").prop( "disabled", false); //enable submit button once ajax is done
   });

这是显示进度条的 HTML 代码:

<div id="progress-wrp">
 <div class="progress-bar"></div>
</div>

Answer 1

你尝试了什么？您是否在 done() 方法的底部尝试了 hide() ？ (这也会在发出请求时显示())

$("#progress-wrp").show(); 使用 jquery 通过它的 id 获取元素并显示它(在这种情况下，当请求开始时)。

$("#progress-wrp").hide(); 使用 jquery 通过它的 id 获取元素并隐藏它(在这种情况下，当请求完成时())。

xhr: function(){
     //upload Progress
     $("#progress-wrp").show();
     var xhr = $.ajaxSettings.xhr();
     if (xhr.upload) {
      xhr.upload.addEventListener('progress', function(event) {
       var percent = 0;
       var position = event.loaded || event.position;
       var total = event.total;
       if (event.lengthComputable) {
        percent = Math.ceil(position / total * 100);
       }
       //update progressbar
       $(progress_bar_id + " .progress-bar").css("width", + percent +"%");
       $(progress_bar_id + " .status").text(percent +"%");
      }, true);
     }
     return xhr;
    },
    mimeType:"multipart/form-data"

    .done(function(res){ //
        $(my_form_id)[0].reset(); //reset form
        $(result_output).html(res); //output response from server
        submit_btn.val("Enviar").prop( "disabled", false); //enable submit button once ajax is done
       $("#progress-wrp").hide();
       });