基于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实现上传图片并预览的效果实现代码
Apr 11 Javascript
js网页侧边随页面滚动广告效果实现
Apr 14 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
js微信分享API
Oct 11 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
Vue插件打包与发布的方法示例
Aug 20 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
javascript实现简易的计算器
Jan 17 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 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 Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
python实现目录树生成示例
2014/03/28 Python
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
Python中的hypot()方法使用简介
2015/05/18 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
python中redis的安装和使用
2016/12/04 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
教师爱岗敬业演讲稿
2014/05/05 职场文书
森林病虫害防治方案
2014/06/02 职场文书
幼儿园运动会口号
2014/06/07 职场文书
与美同行演讲稿
2014/09/13 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
班主任经验交流材料
2014/12/16 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
ICOM R71E和R72E图文对比解说
2022/04/07 无线电
python开发制作好看的时钟效果
2022/05/02 Python