基于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 获取网页参数系统
Jul 19 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
js单例模式的两种方案
Oct 22 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 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
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
自己使用总结Python程序代码片段
2015/06/02 Python
python利用正则表达式提取字符串
2016/12/08 Python
python操作oracle的完整教程分享
2018/01/30 Python
python 并发下载器实现方法示例
2019/11/22 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
python代码如何注释
2020/06/01 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
九月份红领巾广播稿
2014/01/22 职场文书
二手房买卖协议书
2014/04/10 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
开工典礼致辞
2015/07/29 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书