【前台】【单页跳转】整个项目实现单页面跳转,抛弃iframe

简介: 即如下: 【想做到点击nav侧边栏,仅替换右边div中的内容,而不是跳转到新的页面,这样的话,其实整个项目中就只有一个完整的页面,其他的页面均只写内的部分即可,或者仅仅写要替换的内的部分即可!!】index.

即如下: 【想做到点击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文件都已经加载成功了!

 

相关文章
|
缓存 负载均衡 Java
你真的了解负载均衡中间件nginx吗?
nginx可所谓是如今最好用的软件级别的负载均衡了。通过nginx的高性能,并发能力强,占用内存下的特点,可以搭建高性能的代理服务。同时nginx还能作为web服务器,反向代理,动静分离服务器。十分的方便好用,今天让我来一起看看,你真的了解nginx吗?
697 85
|
IDE Java Maven
idea2020版Maven依赖成功导入但仍然报错找不到包解决
idea2020版Maven依赖成功导入但仍然报错找不到包解决
1768 0
idea2020版Maven依赖成功导入但仍然报错找不到包解决
|
12月前
|
编解码 移动开发 安全
FFmpeg开发笔记(五十)聊聊几种流媒体传输技术的前世今生
自互联网普及以来,流媒体技术特别是视频直播技术不断进步,出现了多种传输协议。早期的MMS由微软主导,但随WMV格式衰落而减少使用。RTSP由网景和RealNetworks联合提出,支持多种格式,但在某些现代应用中不再受支持。RTMP由Adobe开发,曾广泛用于网络直播,但因HTML5不支持Flash而受影响。HLS由苹果开发,基于HTTP,适用于点播。SRT和RIST均为较新协议,强调安全与可靠性,尤其SRT在电视直播中应用增多。尽管RTMP仍占一定市场,但SRT等新协议正逐渐兴起。
281 8
FFmpeg开发笔记(五十)聊聊几种流媒体传输技术的前世今生
|
网络协议
使用`http.server`模块搭建简单HTTP服务器
使用`http.server`模块搭建简单HTTP服务器
|
数据采集 Web App开发 JavaScript
Puppeteer实战案例:自动化抓取社交媒体上的媒体资源
Puppeteer实战案例:自动化抓取社交媒体上的媒体资源
|
前端开发 小程序 数据安全/隐私保护
|
存储 前端开发 JavaScript
webpack进阶篇(二十六):webpack实现SSR打包(上)
webpack进阶篇(二十六):webpack实现SSR打包(上)
399 0
webpack进阶篇(二十六):webpack实现SSR打包(上)
|
Docker 容器
Docker容器里没有权限执行命令,提示Permission denied
Docker容器里没有权限执行命令,提示Permission denied
2545 0
|
存储 关系型数据库 MySQL
【MySQL】数据库的设计规范(重点:三大范式)
本文重点介绍MySQL的三大范式、反范式化和巴斯范式的一些问题。
702 0
|
存储 Android开发
方法:表格里面的通讯录怎么导入手机?
忙里偷闲,就在上午,人力资源的一个同事找到我,希望我能帮忙解决一个她遇到的技术难题。说来是这么回事,她是我们公司的HR,手上有一份excel表格(人铭和号码),她说她的需求是能将excel中的号码一键导入手机通讯录,而不用手动一个个来输入。同事(关键她是个漂亮MM呀)请帮忙那还不得赶紧答应吗。在网上查阅了相关资料后,对于问题:怎么快速把电脑excel表格里面的通讯录怎么导入手机,我找到了一个很容易的办法,下面做个图文教程展示一下这个过程。
324 0
方法:表格里面的通讯录怎么导入手机?