即如下： 【想做到点击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的更多相关文章

  1. web项目中实现页面跳转的两种方式

    <a href="javascript:"></a>跳转在网页本身,URL不改变 <a href="#"></a> ...

  2. ios&h5混合开发项目仿app页面跳转优化

    前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作.长话短说,现今的混合开发应该还处于摸索阶段 ...

  3. 微信小程序 发现之旅（一）—— 项目搭建与页面跳转

    开发微信小程序需要注册一个小程序账号,具体流程可以参照官方教程: https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 开通账户之后,在 “开发设置 ...

  4. Http请求状态码302，已得到html页面但未跳转？HttpServletRequest转发/HttpServletResponse重定向后，前端页面未跳转？Ajax怎么处理页面跳转？

    论断 出现此类错误,服务器端出现问题的可能性不大,大概率是前端问题. 问题概述 事情是这样的,我在用Java开发后端.前端页面使用jQuery库的 $.getJSON() 方法发送了一个Ajax请求. ...

  5. 单页应用 WebApp SPA 骨架 框架 路由 页面切换 转场

    这里收录三个同类产品,找到他们花了我不少时间呢. 张鑫旭写的mobilebone自述:mobile移动端,PC桌面端页面无刷新过场JS骨架,简单.专注!http://www.zhangxinxu.co ...

  6. js判断当前页面是否有父页面，页面部分跳转解决办法，子页面跳转父页面不跳转解决 （原）

    //如果当前页面存在父页面,则当前页面的父页面重新加载(即子页面父页面连带跳转) if(top.location!=self.location){         window.parent.loca ...

  7. 以整体思维看问题：解决单页应用，系统角色请求覆盖身份唯一标识（本项目中是session_id命名的）发送请求问题

    以前都是开始一段废话的,现在直接进入主题,首先介绍一下一些概念: 单页应用: 优点: 具有桌面应用的即时性.网站的可移植性和可访问性. 用户体验好.快,内容的改变不需要重新加载整个页面,web应用更具 ...

  8. 单页应用 - Token 验证

    单页应用 - Token 验证 转:https://juejin.im/post/58da720b570c350058ecd40f 第一次接触单页应用,记录公司项目关于Token验证知识. Token ...

  9. 从零搭建一个IdentityServer——单页应用身份验证

    上一篇文章我们介绍了Asp.net core中身份验证的相关内容,并通过下图描述了身份验证及授权的流程: 注:改流程图进行过修改,第三方用户名密码登陆后并不是直接获得code/id_token/acc ...

  10. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

随机推荐

  1. HDU 2102 A计划（BFS）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2102 题目大意:公主被关在一个两层的迷宫里,迷宫的入口是S(0,0,0),公主的位置用P表示,时空传输 ...

  2. 教你如何更改android应用的包名

    Android 源码自带了很多应用程序,想改个包名方便修改?很简单,两步搞定,以packages/apps/Settings为例: 1.打开AndroidManifest.xml,把 <mani ...

  3. [tensorflow]的安装

    1 pip install 最简单直接的方法,通过pip install安装,命令如下: pip install tensorflow-gpu //安装gpu版tensorflow pip insta ...

  4. appium+python自动化39-adb shell输入中文(ADBKeyBoard)

    前言 上一篇提到"adb shell input textyoyo" 可以通过adb 输入英文的文本,由于不支持unicode编码,所以无法输入中文,github上有个国外的大神写 ...

  5. iOS客户端学习之AES加密

    数据加密在解密在软件开发过程中举足轻重的作用,可能有的公司在加密的时候有自己公司内部一套设计的算法,而在这方面不想浪费太大精力就可以去考虑使用第三方提供的加密算法,如AES加密算法,本篇内容介绍开源中 ...

  6. C++中对已分配空间的指针调用一个类的构造函数

    在看MINIBASE的源代码的时候发现里面有类似于这样的东西 bufTable = (BufDesc*) MINIBASE_SHMEM->malloc( numBuffers * sizeof( ...

  7. Node JVM

    Yaroslav Gaponov发布到Github的一个开源项目.用纯Node.js写的JVM.具体的实例和编译.运行过程,请直接看Node JVM在GitHub的主页. GitHub的主页:http ...

  8. Ubuntu 如何更换阿里源

    #进入源地址 cd /etc/apt #备份源文件 sudo cp sources.list sources.list.bak #编辑 sudo vim /etc/apt/sources.list d ...

  9. Python实现图片转文字并翻译至剪切板

    一.环境搭建: 1.PySimpleGUI: pip3 install pysimplegui 2.pytesseract需要有tesseract环境才行: 1. 先搭建tesseract: brew ...

  10. UVA11019 Martix Matcher --- AC自动机

    UVA11019 Martix Matcher 题目描述: 给定一个\(n*m\)的文本串 问一个\(x*y\)的模式串出现的次数 AC自动机的奇妙使用 将\(x*y\)的模式串拆分成x个串,当x个串 ...