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 相关文章推荐
JavaScript格式化数字的函数代码
Nov 30 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
解读ES6中class关键字
Nov 20 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
JS实现4位随机验证码
Oct 19 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 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
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
mysql 搜索之简单应用
2007/04/27 PHP
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
php遍历目录方法小结
2015/03/10 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
jQuery 解析xml文件
2009/08/09 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
python3.5 email实现发送邮件功能
2018/05/22 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
C#如何进行LDAP用户校验
2012/11/21 面试题
精彩的大学生自我评价
2013/11/17 职场文书
团购业务员岗位职责
2014/03/15 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
工作作风承诺书
2014/08/30 职场文书
校园广播稿100字
2014/10/06 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
Django migrate报错的解决方案
2021/05/20 Python