【前台】整个项目实现单页面跳转,抛弃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>

 

 重新跳转访问:

 

即可解决乱码问题!!!

相关文章
|
17天前
|
搜索推荐 前端开发 UED
html页面实现自动适应手机浏览器(一行代码搞定)
html页面实现自动适应手机浏览器(一行代码搞定)
18 0
|
6月前
|
小程序 PHP
【Uniapp小程序】实现上滑加载分页(触底加载)附后端Thinkphp代码
【Uniapp小程序】实现上滑加载分页(触底加载)附后端Thinkphp代码
|
8月前
|
前端开发
如何对ajax请求的后台数据添加到swiper轮播图并展示到页面
如何对ajax请求的后台数据添加到swiper轮播图并展示到页面
98 0
|
8月前
|
缓存
uniapp的mescroll-body组件与页面切换冲突.mescroll-body组件下拉异常,mescroll-body组件页面跳转回来后下滑屏幕直接触发了下拉刷新.
uniapp的mescroll-body组件与页面切换冲突.mescroll-body组件下拉异常,mescroll-body组件页面跳转回来后下滑屏幕直接触发了下拉刷新.
163 0
|
11月前
|
小程序 JavaScript
小程序里页面跳转的两种方式
小程序里页面跳转的两种方式
122 0
|
11月前
|
移动开发 小程序 Android开发
小程序webview组件,小程序和webview交互,小程序内联h5页面,小程序webview内网页实现微信支付
小程序webview组件,小程序和webview交互,小程序内联h5页面,小程序webview内网页实现微信支付
231 0
|
前端开发 JavaScript 数据安全/隐私保护
form表单常见控件应用,实例讲解注册页面的开发【2020网页综合笔记03】
form表单常见控件应用,实例讲解注册页面的开发【2020网页综合笔记03】
159 0
form表单常见控件应用,实例讲解注册页面的开发【2020网页综合笔记03】
(uniapp跳转回显),A页面进入B页面,B页面返回A页面,并传值给A页面(技巧绝对好用慢慢看)
(uniapp跳转回显),A页面进入B页面,B页面返回A页面,并传值给A页面(技巧绝对好用慢慢看)
365 0
(uniapp跳转回显),A页面进入B页面,B页面返回A页面,并传值给A页面(技巧绝对好用慢慢看)
|
前端开发 JavaScript
为iframe正名,你可能并不需要微前端
任何新技术、新产品都是有一定适用场景的,它可能在当下很流行,但它不一定在任何时候都是最优解。
701 0
为iframe正名,你可能并不需要微前端
|
前端开发 IDE 开发工具
「趣学前端」页面上吸顶的效果是怎么做到的
用技术实现梦想,用梦想打开创意之门。为了给不懂技术的朋友讲解日常开发中怎么实现网页的效果,我准备出一个系列。
130 1

热门文章

最新文章