基于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中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
AngularJS执行流程详解
Feb 17 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 Javascript
JS实现简单九宫格抽奖
Jun 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中实现图片的锐化
2006/10/09 PHP
php UBB 解析实现代码
2011/11/27 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
js单例模式的两种方案
2013/10/22 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
java必学必会之static关键字
2015/12/03 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
python实现无证书加密解密实例
2014/10/27 Python
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
Django日志模块logging的配置详解
2017/02/14 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
python groupby 函数 as_index详解
2019/12/16 Python
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
生物科学专业个人求职信范文
2013/12/05 职场文书
项目开发计划书
2014/01/09 职场文书
银行求职自荐书
2014/06/25 职场文书
班级心理活动总结
2014/07/04 职场文书
党性心得体会
2014/09/03 职场文书
升学宴学生答谢词
2015/01/05 职场文书
2016新年晚会开场白
2015/12/03 职场文书
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏
详解SQL的窗口函数
2022/04/21 Oracle
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python