基于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 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
javascript插入样式实现代码
Feb 22 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
Nov 06 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
Vue中keep-alive的两种应用方式
Jul 15 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 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 session有效期session.gc_maxlifetime
2011/04/20 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
微信小程序纯文本实现@功能
2020/04/08 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
详细解析Python当中的数据类型和变量
2015/04/25 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
实习自荐信
2013/10/13 职场文书
领导视察欢迎词
2014/01/15 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
AJAX实现省市县三级联动效果
2021/10/16 Javascript
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫