基于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之可拖动的iframe效果代码
Aug 01 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
vue transition 在子组件中失效的解决
Nov 12 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
vue-router中hash模式与history模式的区别
Jun 23 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
重置版游戏视频
2020/04/09 魔兽争霸
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
实用函数7
2007/11/08 PHP
php合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
js获取单选按钮的数据
2006/11/27 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
用实例说明python的*args和**kwargs用法
2013/11/01 Python
python支持断点续传的多线程下载示例
2014/01/16 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
Python如何快速实现分布式任务
2017/07/06 Python
Python3最长回文子串算法示例
2019/03/04 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
struct与class的区别
2014/02/03 面试题
英语专业个人求职信范文
2014/02/01 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
家长会感言
2015/08/01 职场文书
优秀员工演讲稿
2019/06/21 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers