基于bootstrap页面渲染的问题解决方法


Posted in Javascript onAugust 09, 2018

本人不擅长前台,写此文只是讲一下我解决页面渲染的一个小的解决办法,或许这个方法大家早知道了,但是应该还会有像我一样还在纠结的小伙伴,帮助一下像我一样的不擅长前台的童鞋。

这几天正在做一个后台管理的小项目,从网上找了个基于bootstrap的ui模板,参考了一般系统的做法,都是上面一个navbar,左侧一个目录树,然后空出来的一大片地方放置内容。然后各种把每个区域都提出去,弄成一个一个的小文件,然后include到一个大文件中。

当做到内容区域的时候就在考虑,内容是放在iframe中进行局部渲染,还是像网上有些框架那样,每个页面都include navbar,目录树?如果每个页面都包含了同样的目录树,那刷新页面的时候就是整页面刷新,这个不是我想要的;然后去网上查了一下,一些人说bootstrap框架可以用iframe,但是强烈不建议使用,可能出现各种各样的问题。(专门试了一版iframe的,确实是与人家的模板样式差很远)

于是就各种实验,无意中看到一个介绍局部刷新div的方法,也就是用ajax去请求一个页面

var menuClick = function (menuUrl) {
 $.get(menuUrl,function (data) {
  alert(data);
  $("#mainframe").html(data);
 });

};

这里的menuUrl可以是一个html页面的路径,也可以是一个***.do,然后跳转到一个页面,回调函数里面的data就是你请求的那个页面,成功之后只需要获取页面上的一个div,然后将返回的html代码拼接到那个div中即可。点击目录的节点时候只需要调用这个方法,然后将对应的url传入这个方法即可。

以上这篇基于bootstrap页面渲染的问题解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门教程(7) History历史对象
Jan 31 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
js实现移动端轮播图
Dec 21 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 #Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 #Javascript
JavaScript引用类型Function实例详解
Aug 09 #Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 #jQuery
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 #Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 #Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 #Javascript
You might like
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
python中rb含义理解
2020/06/18 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
全球性的女装店:storets
2019/06/12 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
卫校护理专业毕业生求职信
2013/11/26 职场文书
重阳节登山活动方案
2014/02/03 职场文书
六年级学生评语
2014/04/22 职场文书
小学综合实践活动总结
2014/07/07 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
SQL Server Agent 服务无法启动
2022/04/20 SQL Server