基于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 相关文章推荐
js 事件小结 表格区别
Aug 13 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
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
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
js判断密码强度的方法
2020/03/18 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
Python实现简易Web爬虫详解
2018/01/03 Python
Python微信公众号开发平台
2018/01/25 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
深入浅析Python的类
2018/06/22 Python
Python-openCV开运算实例
2020/07/05 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
南京迈特望C/C++面试题
2012/07/09 面试题
营业员实习自我鉴定
2013/12/07 职场文书
民事授权委托书范文
2014/08/02 职场文书
2016十一国庆节感言
2015/12/09 职场文书