【前台】【单页跳转】整个项目实现单页面跳转,抛弃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文件都已经加载成功了!

 

相关文章
|
5月前
|
开发框架 移动开发 Android开发
uniapp的几种跳转方式
uniapp的几种跳转方式
|
5月前
uniapp的两个跳转方式
uniapp的两个跳转方式
|
4月前
|
小程序
微信小程序实现不同按钮跳转同一个页面显示不同内容
微信小程序实现不同按钮跳转同一个页面显示不同内容
73 0
|
6月前
|
前端开发 JavaScript API
浅谈移动端页面无刷新跳转问题的解决方案
浅谈移动端页面无刷新跳转问题的解决方案
67 0
|
6月前
|
开发框架 移动开发 JavaScript
uniapp跳转方式
uniapp跳转方式
48 0
|
9月前
|
小程序
微信小程序系列——跳转页面以及跳转小程序
微信小程序系列——跳转页面以及跳转小程序
|
9月前
|
前端开发
如何对ajax请求的后台数据添加到swiper轮播图并展示到页面
如何对ajax请求的后台数据添加到swiper轮播图并展示到页面
100 0
|
10月前
|
JavaScript 前端开发 Go
页面前进、页面后退、页面跳转的方法
页面前进、页面后退、页面跳转的方法
|
12月前
|
小程序 JavaScript
小程序里页面跳转的两种方式
小程序里页面跳转的两种方式
124 0
|
前端开发 JavaScript Java