【前台】【单页跳转】整个项目实现单页面跳转，抛弃iframe
即如下： 【想做到点击nav侧边栏，仅替换右边div中的内容，而不是跳转到新的页面,这样的话，其实整个项目中就只有一个完整的页面，其他的页面均只写<body>内的部分即可，或者仅仅写要替换的<div>内的部分即可！！】
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的更多相关文章
- web项目中实现页面跳转的两种方式
<a href="javascript:"></a>跳转在网页本身,URL不改变 <a href="#"></a> ...
- ios&h5混合开发项目仿app页面跳转优化
前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作.长话短说,现今的混合开发应该还处于摸索阶段 ...
- 微信小程序 发现之旅（一）—— 项目搭建与页面跳转
开发微信小程序需要注册一个小程序账号,具体流程可以参照官方教程: https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 开通账户之后,在 “开发设置 ...
- Http请求状态码302，已得到html页面但未跳转？HttpServletRequest转发/HttpServletResponse重定向后，前端页面未跳转？Ajax怎么处理页面跳转？
论断 出现此类错误,服务器端出现问题的可能性不大,大概率是前端问题. 问题概述 事情是这样的,我在用Java开发后端.前端页面使用jQuery库的 $.getJSON() 方法发送了一个Ajax请求. ...
- 单页应用 WebApp SPA 骨架 框架 路由 页面切换 转场
这里收录三个同类产品,找到他们花了我不少时间呢. 张鑫旭写的mobilebone自述:mobile移动端,PC桌面端页面无刷新过场JS骨架,简单.专注!http://www.zhangxinxu.co ...
- js判断当前页面是否有父页面，页面部分跳转解决办法，子页面跳转父页面不跳转解决 （原）
//如果当前页面存在父页面,则当前页面的父页面重新加载(即子页面父页面连带跳转) if(top.location!=self.location){ window.parent.loca ...
- 以整体思维看问题：解决单页应用，系统角色请求覆盖身份唯一标识（本项目中是session_id命名的）发送请求问题
以前都是开始一段废话的,现在直接进入主题,首先介绍一下一些概念: 单页应用: 优点: 具有桌面应用的即时性.网站的可移植性和可访问性. 用户体验好.快,内容的改变不需要重新加载整个页面,web应用更具 ...
- 单页应用 - Token 验证
单页应用 - Token 验证 转:https://juejin.im/post/58da720b570c350058ecd40f 第一次接触单页应用,记录公司项目关于Token验证知识. Token ...
- 从零搭建一个IdentityServer——单页应用身份验证
上一篇文章我们介绍了Asp.net core中身份验证的相关内容,并通过下图描述了身份验证及授权的流程: 注:改流程图进行过修改,第三方用户名密码登陆后并不是直接获得code/id_token/acc ...
- bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
随机推荐
- day4 作业计算器
作业:计算器开发 (1)实现加减乘除及拓号优先级解析: (2)用户输入 1 - 2 * ( (60-30 +(-40/5) * (-9-2*5/-3 + 7 /3*99/4*2998 +10 * 56 ...
- day4 递归原理及解析
递归 递归是一种调用自身的方法,在函数执行过程中重复不断的调用自身的过程,递归的规模每次都要缩小,一般前一步的程序作为后一步的参数.但是必须有递归结束条件. 递归算法是一种直接或者间接地调用自身算法的 ...
- python生成器 协程
生成器 参考文章: 协程 gevent 生成器进阶 看个例子: def gg(): n='' i=0 while True: n=yield i #通过send传入到n if not n: pa ...
- TPL之延续任务
引言: 最近经常想到一句话“纸上得来终觉浅”,不知道有没有朋友有相似的感觉,如果要的话我想应该就要努力充电了.因为在做东西的时候,要用到异步加载数据,具体功能也就是当加载数据的时候,创建线程异步加载数 ...
- Docker应用系列（二）| 构建Zookeeper集群
本示例基于Centos 7,在阿里云的三台机器上部署zookeeper集群,假设目前使用的账号为release,拥有sudo权限. 由于Docker官方镜像下载较慢,可以开启阿里云的Docker镜像下 ...
- Poj1741/洛谷P4718 Tree（点分治）
题面 有多组数据:Poj 无多组数据:洛谷 题解 点分治板子题,\(calc\)的时候搞一个\(two\ pointers\)扫一下统计答案就行了. #include <cmath> #i ...
- pfring破解DNA限制
最近因工作需要,对pf_ring进行反调试.官方下载的pf_ring转发数据包的过程中,对程序做了五分钟的限制.那么如何突破此限制.此篇博客记录一下过程,已备后用. 下载源码后进行编译,此处我们利用源 ...
- HashMap实现原理及常见问题
1.简介 HashMap是基于哈希表的Map接口的实现,用来存放键值对(Entry<Key,Value>),并提供可选的映射操作.使用put(Key,Value)存储对象到HashMap中 ...
- Django Restframework 实践（二）
按照自己的方法来写接口 ''' @api_view([ 'POST','GET',]) 允许请求的是get或post方法,这里去掉get那么就不能用get方法请求 @permission_classe ...
- king's trouble II SCU - 4488
Time Limit: 1000 MS Memory Limit: 131072 K Description Long time ago, a king occupied a vast territo ...