Flask接口签名sign原理与实例代码浅析
424
2023-05-21
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视图
<!-- 模态框(Modal) -->
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");
}
});
以上所述是给大家介绍的Bootstrap进度条与AJAX后端数据传递结合使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~