基于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 相关文章推荐
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
js验证框架实现代码分享
May 18 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
基于Vue实现拖拽功能
Jul 29 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
JavaScript中window和document用法详解
Jul 28 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
PHP 函数语法介绍一
2009/06/14 PHP
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
利用PHP实现短域名互转
2013/07/05 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
python写的ARP攻击代码实例
2014/06/04 Python
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
学校师德承诺书
2014/05/23 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
试用期辞职信范文
2015/03/02 职场文书
大学生求职信怎么写
2015/03/19 职场文书
不同意离婚代理词
2015/05/23 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL
MySQL 语句执行顺序举例解析
2022/06/05 MySQL
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技