很多時(shí)候,我們執(zhí)行頁(yè)面上某個(gè)URL請(qǐng)求的時(shí)候,需要有等待的時(shí)間。如果是直接的頁(yè)面跳轉(zhuǎn),瀏覽器會(huì)有緩沖進(jìn)度展示,但是如果是AJAX,我覺(jué)得應(yīng)該自己加上進(jìn)度條,等待數(shù)據(jù)全部接收到之后,進(jìn)度條消失,展示頁(yè)面。
在Yii框架里面使用了AJAX后,覺(jué)得前后端的數(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');//服務(wù)器停止了5秒,sleep(5),假設(shè)是查詢數(shù)據(jù)用了5秒  //setTimeout("$('#searchModal').modal('hide')",2000); //設(shè)置2000毫秒之后模態(tài)框消失     $('#searchModal').on('hidden.bs.modal', function () { //    // 執(zhí)行一些動(dòng)作...   $("#homeworkContent").html(mydata); //顯示后端傳遞的結(jié)果   }); },  error : function() {   alert("calc failed");  } }); </script>以上所述是小編給大家介紹的Bootstrap進(jìn)度條與AJAX后端數(shù)據(jù)傳遞結(jié)合使用,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注