很多時候，我們執(zhí)行頁面上某個URL請求的時候，需要有等待的時間。如果是直接的頁面跳轉(zhuǎn)，瀏覽器會有緩沖進度展示，但是如果是AJAX，我覺得應該自己加上進度條，等待數(shù)據(jù)全部接收到之后，進度條消失，展示頁面。

在Yii框架里面使用了AJAX后，覺得前后端的數(shù)據(jù)交互變得方便多了。

下面直接貼代碼啦

控制器Controller

public function actionTest(){   if(isset($_POST["number"])){    $html = “success”; }else{ $html ="something wrong"; } sleep(5); echo $html; Yii::app()->end();}

View視圖

<!-- 模態(tài)框（Modal） --><div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content">      <div class="modal-body">  <div id='modal_message' style="text-align: center"><h2>正在查詢中.....</h2></div>  <div class="progress progress-striped active">   <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60"    aria-valuemin="0" aria-valuemax="100" style="width: 100%;">   <span class="sr-only">100% 完成</span>   </div>  </div>  </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div><script type="text/javascript"> $("#searchModal").modal("show");//顯示“正在查詢”字樣的模態(tài)框 htmlobj = $.ajax({  url:"/Controller/test",  type : 'POST',  data : { "number" : "123",      },  dataType : "text",  //contentType : 'application/x-www-form-urlencoded',  async : true,  success : function(mydata) {   $('#searchModal').modal('hide');//服務器停止了5秒,sleep(5)，假設是查詢數(shù)據(jù)用了5秒  //setTimeout("$('#searchModal').modal('hide')",2000); //設置2000毫秒之后模態(tài)框消失     $('#searchModal').on('hidden.bs.modal', function () { //    // 執(zhí)行一些動作...   $("#homeworkContent").html(mydata); //顯示后端傳遞的結(jié)果   }); },  error : function() {   alert("calc failed");  } }); </script>

以上所述是小編給大家介紹的Bootstrap進度條與AJAX后端數(shù)據(jù)傳遞結(jié)合使用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網(wǎng)站的支持！