基于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多重继承示例
Mar 13 Javascript
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
JavaScript中Require调用js的实例分享
Oct 27 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 Javascript
JS实现简易留言板(节点操作)
Mar 16 Javascript
react中props 的使用及进行限制的方法
Apr 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中strlen和mb_strlen函数的区别
2014/03/07 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
php学习笔记之面向对象
2014/11/08 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
Java中实现多态的机制
2015/08/09 面试题
高中生学习总结的自我评价范文
2013/10/13 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
环保志愿者活动方案
2014/08/14 职场文书
咖啡店创业计划书
2014/08/15 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
vue实现滑动解锁功能
2022/03/03 Vue.js
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技