【前台】【单页跳转】整个项目实现单页面跳转,抛弃iframe
2017-12-22 13:55
281 查看
即如下: 【想做到点击nav侧边栏,仅替换右边div中的内容,而不是跳转到新的页面,这样的话,其实整个项目中就只有一个完整的页面,其他的页面均只写<body>内的部分即可,或者仅仅写要替换的<div>内的部分即可!!】
index.jsp页面就是如上,也就是整个项目中的主页面,页面中包含nav部分和div部分,现在index.js中绑定左边侧边栏点击事件
controller.java如下:
中代码如下:
然后点击之后跳转的效果如下:
乱码处理方式:
sub1.jsp中代码修改为:
重新跳转访问:
即可解决乱码问题!!!
==========================================================================================================
问题1:
母页面中<script>引入js都在页面的最下方,而新引入的页面,也会需要引入新的js文件,那这引入的js文件能否起作用呢?
说明如下:
解释:
可以直接追加进入!!且自定义的js是可以起作用的。因为在新页面的代码追加入母页面的div之前,母页面中的js文件都已经加载成功了!
index.jsp页面就是如上,也就是整个项目中的主页面,页面中包含nav部分和div部分,现在index.js中绑定左边侧边栏点击事件
$(".sub").click(function(){ //点击侧边栏的一个按钮之后,ajax去请求后台controller,然后controller返回一个页面地址,data中即新页面中的标签代码,然后填充到div中即可实现整个项目单页面 $.ajax({url:"../sub1", type:"post", traditional:true, success:function(data){ $(".container-fluid").empty(); $(".container-fluid").append(data); } }); });
controller.java如下:
@RequestMapping(value = "sub1") public String sub1(){ System.out.println("zhuyemian"); return "/sub/sub1"; }
中代码如下:
然后点击之后跳转的效果如下:
乱码处理方式:
sub1.jsp中代码修改为:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <h1 class=""> 做点什么事情</h1>
重新跳转访问:
即可解决乱码问题!!!
==========================================================================================================
问题1:
母页面中<script>引入js都在页面的最下方,而新引入的页面,也会需要引入新的js文件,那这引入的js文件能否起作用呢?
说明如下:
解释:
可以直接追加进入!!且自定义的js是可以起作用的。因为在新页面的代码追加入母页面的div之前,母页面中的js文件都已经加载成功了!
相关文章推荐
- iframe 的使用和登陆退出的实现——整个页面跳转
- j2ee项目后置类代码实现跳出iframe页面跳转
- 页面使用iframe进行嵌套,关于如何实现,在子页面使整个页面跳转到其他页面
- 041医疗项目-模块四:采购单模块—采购单创建好之后跳转到采购单修改页面,然后实现修改采购单功能
- iframe跳转到父页面实现
- iOS项目开发实战——使用代码实现页面跳转
- 不用ajax的局部页面跳转实现方法(iframe)
- 解决iframe跳转不刷新整个页面小问题
- cas ajax+jsonp+iframe 实现无页面跳转
- iOS项目开发实战——使用三种方式实现页面跳转与参数传递(二)
- frameset怎样实现整个页面的跳转
- 【坑】如何从iframe中跳出来,让整个页面都跳转
- Extjs 实现Iframe的子窗口遮罩整个页面
- 让链接在指定的iframe中跳转显示,实现链接内容不刷新父页面显示到iframe中
- 前台中使用JQ的 post方法跳转页面 实现企业中的 增改查的功能
- 一、东软实践项目2-基于android平台的应用开发:实现页面之间的跳转
- 小KING教你做android项目(二)---实现登陆页面并跳转和简单的注册页面
- 前台ajax重写方法搭配后台filter返回status实现ajax请求跳转登录页面
- Extjs 实现Iframe的子窗口遮罩整个页面
- 点击iframe 中某页面的一个按钮实现跳转到iframe外面的窗体里面