在Ajax请求开始和结束时显示和隐藏元素(状态栏)

Show and Hide an element (status bar) when Ajax request starts and finishes

本文关键字：元素 隐藏 状态栏 显示 Ajax 请求 开始 结束      更新时间：2023-09-26

我有一个表单，通过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>

你试了什么?您是否尝试在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();
       });
相关文章：