如何显示与用户提交表单时显示的 gmail 水平蓝色进度条完全相同的蓝色进度条？

Question

我在我的网站中使用 Bootstrap v3.3.5。

在一种情况下，我在 Bootstrap 模式对话框中显示一个表单。用户填写数据并提交表单。提交表单后，表单将保持原样，直到收到来自服务器的响应。

所以，我想做的是显示一个蓝色水平进度条，它与 gmail 在登录后加载收件箱邮件列表时使用的蓝色水平进度条完全相似。这个进度条应该像 gmail 的进度条一样是动态的（即本质上是渐进的，而不是像旋转圆加载器图像）。

它应该显示在表单顶部，并带有消息“请稍候...正在生成您的事件。”我在我的代码中添加了一条注释，告诉它应该在哪里准确显示。

以下是我的 Bootstrap modal 的 HTML 代码：

    <form method="post" action="{$site_url}add_event.php" id="formAddEvent" >
      <!-- The gmail look alike loader should display here only upon successfull submission of a form. -->
      <div class="form-group" id="addEventErrorMsg" style="display:none; color:#FF0000;">
      </div>
      <div class="form-group">
        <input type="text" name="txt_event_title" id="txt_event_title"  autocomplete="off" class="form-control custom-height" placeholder="Event Title" style="height:30px;" />
       </div>
       <div class="form-group">
         <textarea type="text" name="txt_event_description" id="txt_event_description"  autocomplete="off" class="form-control custom-height" placeholder="Description (optional)" style="height:60px;" ></textarea>
       </div>
       <table border="0" cellspacing="10">
         <tr>
           <th><span class="event-title1" style="margin-bottom:5px;">Start Date:</span></th>
           <th><span class="event-title1" style="margin-bottom:5px;">End Date:</span></th>
         </tr>
         <tr>
           <td>
             <div style="margin-right:15px;" class="form-inline form-group event-selection">
             <div class="form-group has-feedback">
               <div class='input-append date form_datetime' data-date="2013-02-21T15:25:00Z">
                 <input type='text' id='event_start_date' name="event_start_date" style="width:225px; display:inline; height:30px;" class="form-control" autocomplete="off" />
                 <span aria-hidden="true" class="glyphicon glyphicon-calendar form-control-feedback"></span>
               </div>
             </div>
           </div>
         </td>
         <td>
           <div class="form-inline form-group event-selection">
             <div class="form-group has-feedback">
               <div class='input-append date form_datetime' data-date="2013-02-21T15:25:00Z">
                 <input type='text' id='event_end_date' name="event_end_date" style="width:225px; display:inline;height:30px;" class="form-control" autocomplete="off" />
                 <span aria-hidden="true" class="glyphicon glyphicon-calendar form-control-feedback"></span>
               </div>
             </div>
           </div>
         </td>
       </tr>
     </table>   
     <div class="form-group has-feedback">
       <input type="text" name="txt_event_location" id="txt_event_location"  autocomplete="off" class="controls form-control custom-height" placeholder="Event Location" style="height:30px;" />
       <span class="glyphicon glyphicon-map-marker form-control-feedback" aria-hidden="true"></span>        
     </div>     
     <div style="clear:both;"> </div>
     <div id="map"></div>
     <div class="form-group">
       <input type="text" name="txt_event_room" id="txt_event_room"  autocomplete="off" class="form-control custom-height" placeholder="Room No." style="height:30px;" />
     </div>
     <div class="form-group">
       <div id="custom-templates">
         <input class="typeahead form-control custom-height" id="selected_groupname" name="selected_groupname" type="text" placeholder="Invite Group" value="{foreach from=$user_group_list1 item=grouplist key=key} {if $groupId==$grouplist.page_id} {$grouplist.title} {/if} {/foreach}">
         <input type="hidden" name="selected_groupid" id="selected_groupid" value=""  />
       </div>
     </div>        
     <div class="modal-footer text-center">
       <button class="btn btn-primary" id="btn_add_event" type="button">Add Event</button>
       <button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
     </div>
   </form>

点击id为btn_add_event的按钮提交表单时调用的函数如下：

$(document).ready(function() {
  $("#btn_add_event").click(function() {

    var strSeriaze = $( "#formAddEvent" ).serialize();
    url = $( "#formAddEvent" ).attr('action');
    $("#btn_add_event").attr('disabled', 'disabled');
    $("#addEventErrorMsg").html('');
    $.ajax({
      url  : url,
      type : "POST",
      data :  {postData:strSeriaze},
      beforeSend: function() {
        $('#loader-icon').show();
      },
      complete : function() {
        $('#loader-icon').hide();
      },
      success : function(data) {
       // $("#events-result").append(data);
       $('#loader-icon').hide();

       if(data == true) {
         $("#myModal-add-event").modal('hide');
         $("#myModal-add-event").hide();
         //window.location = site_url + "event_index.php";
         window.location.href = site_url + "event_index.php";
         return false;
        } else {
          $("#btn_add_event").attr('disabled', false);
          $("#addEventErrorMsg").show();
          $("#addEventErrorMsg").html(data);
        }
      },
      error: function() {}
    });       
  })
});   

请帮助我。谢谢。

我的问题与其他任何问题都不同。我不知道如何处理进度条百分比或响应时间的进度。我没有从任何地方得到解决方案。请从我的问题中删除重复的标签。

Answer 1

我的问题与其他任何问题都不同。我不知道怎么做 使用进度条百分比或响应时间进度。 我没有从任何地方得到解决方案。请去掉标签 我的问题中的重复项。

不，它没有什么不同，因此它是重复的

• show progressbar while loading pages using jquery ajax in single page website

唯一的区别是你在赏金通知中说

这个问题获得了来自 user2839497 的奖励，价值 +50。

这个问题广泛适用于大量受众。一个详细的 解决所有问题需要规范的答案。

我想要这个问题的规范答案。我想要一个工作演示 必须与我在 题。我需要相同的整个工作代码演示（jsfiddle）。 我不想要任何教程或其他任何参考链接。一世 只想工作完全相同的谷歌风格的蓝色进度 栏在我网站的 ajax 函数调用中工作。不管怎样你让我 代码与必要的其他代码一起工作。谢谢。热切地等待着 完美的答案伙计们。祝你有美好的一天。

由于 SO 不是供其用户使用的代码工厂，因此欺骗是解决您的问题的绝佳方式。

当问题作为副本关闭时，此社区答案将被删除。

---

在post review之后编辑

这段代码 sn-p 显示了进度条的基本部分。

HTML

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

脚本

function set_pbar(p) {  
  $('.progress-bar').css({ width:(p * 100)+'%'});
}

$.ajax({
  xhr: function() {
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {

        //Sending in progress, divided with 2 make bar 50% wide after sending
        set_pbar(evt.loaded / evt.total / 2);

      }
    }, false);
    xhr.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {

        //Receiving in progress, dividing with 2 and adding 0.5 make bar start at 50%
        set_pbar(0.5 + (evt.loaded / evt.total / 2));

      }
    }, false);
    return xhr;
  },
  url: "/echo/json/",
  type: 'POST',
  data: {json: JSON.stringify(new Array(100000))},
  success: function(data){

    //Loaded...

  }
});