基于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 相关文章推荐
日期函数扩展类Ver0.1.1
Sep 07 Javascript
js或css文件后面跟参数的原因说明
Jan 09 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
小程序图片长按识别功能的实现方法
Aug 30 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 Javascript
JS运算符简单用法示例
Jan 19 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 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
PHP4实际应用经验篇(6)
2006/10/09 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
Node.js编码规范
2014/07/14 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
python不带重复的全排列代码
2013/08/13 Python
让 python 命令行也可以自动补全
2014/11/30 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
Python之Sklearn使用入门教程
2021/02/19 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
干部下基层实施方案
2014/03/14 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
护士旷工检讨书
2015/08/15 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
商业计划书格式、范文
2019/03/21 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android