ajax bootstrap 进度条,Bootstrap进度条与AJAX后端数据传递结合使用实例详解

很多时候，我们执行页面上某个URL请求的时候，需要有等待的时间。如果是直接的页面跳转，浏览器会有缓冲进度展示，但是如果是AJAX，我觉得应该自己加上进度条，等待数据全部接收到之后，进度条消失，展示页面。

在Yii框架里面使用了AJAX后，觉得前后端的数据交互变得方便多了。

下面直接贴代码啦

控制器Controller

public function actionTest(){

if(isset($_POST["number"])){

$html = “success”;

}else{

$html ="something wrong";

}

sleep(5);

echo $html;

Yii::app()->end();

}

View视图

正在查询中.....

aria-valuemin="0" aria-valuemax="100" style="width: 100%;">

100% 完成

$("#searchModal").modal("show");//显示“正在查询”字样的模态框

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)，假设是查询数据用了5秒

//setTimeout("$('#searchModal').modal('hide')",2000); //设置2000毫秒之后模态框消失

$('#searchModal').on('hidden.bs.modal', function () {

// // 执行一些动作...

$("#homeworkContent").html(mydata); //显示后端传递的结果

});

},

error : function() {

alert("calc failed");

}

});