码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-12-22 14:52:48      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:public   ping   log   end   解决   alt   click   set   完整   

即如下: 【想做到点击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>

技术分享图片

 

 重新跳转访问:

技术分享图片

 

即可解决乱码问题!!!

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

标签:public   ping   log   end   解决   alt   click   set   完整   

原文地址:http://www.cnblogs.com/sxdcgaq8080/p/8085680.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!