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


Posted in Javascript onApril 23, 2017

很多时候,我们执行页面上某个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) -->
<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");//显示“正在查询”字样的模态框
 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"); 
 } 
}); 
</script>

以上所述是小编给大家介绍的Bootstrap进度条与AJAX后端数据传递结合使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery trim() 功能源代码
Feb 14 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 #Javascript
Node.js中的require.resolve方法使用简介
Apr 23 #Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 #Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 #Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 #Javascript
Vue.use源码分析
Apr 22 #Javascript
uploader秒传图片到服务器完整代码
Apr 22 #Javascript
You might like
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
PHP求最大子序列和的算法实现
2011/06/24 PHP
三种php连接access数据库方法
2013/11/11 PHP
PHP文件上传类实例详解
2016/04/08 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
日期 时间js控件
2009/05/07 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
用Python编写web API的教程
2015/04/30 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
python数字类型math库原理解析
2020/03/02 Python
opencv实现图像几何变换
2021/03/24 Python
大学生毕业自我评价范文分享
2013/11/07 职场文书
《蒲公英》教学反思
2014/02/28 职场文书
大二学年个人总结
2015/03/03 职场文书
《1942》观后感
2015/06/08 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
MySQL派生表联表查询实战过程
2022/03/20 MySQL
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers