博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【前台】【单页跳转】整个项目实现单页面跳转,抛弃iframe
阅读量:6306 次
发布时间:2019-06-22

本文共 1172 字,大约阅读时间需要 3 分钟。

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

做点什么事情

 

 重新跳转访问:

 

即可解决乱码问题!!!

 

==========================================================================================================

问题1:

母页面中<script>引入js都在页面的最下方,而新引入的页面,也会需要引入新的js文件,那这引入的js文件能否起作用呢?

说明如下:

  

解释:

  可以直接追加进入!!且自定义的js是可以起作用的。因为在新页面的代码追加入母页面的div之前,母页面中的js文件都已经加载成功了!

 

转载于:https://www.cnblogs.com/sxdcgaq8080/p/8085680.html

你可能感兴趣的文章
Hadoop日记Day1---Hadoop介绍
查看>>
iOS 学习资料汇总
查看>>
centos7 yum安装jdk
查看>>
Bluedroid与BluZ,蓝牙测试方法的变动(基于bludroid和BlueZ的对比)
查看>>
接口和抽象类有什么区别
查看>>
Linux 下添加用户,修改权限
查看>>
请问view controller scene,该如何删除
查看>>
bootstrap新闻模块样式模板
查看>>
zzzzw_在线考试系统①准备篇
查看>>
App Store 审核被拒的23个理由
查看>>
剑指offer第二版-1.赋值运算符函数
查看>>
javascript 对象
查看>>
Android学习笔记——文件路径(/mnt/sdcard/...)、Uri(content://media/external/...)学习
查看>>
Echart:前端很好的数据图表展现工具+demo
查看>>
CATransform3D iOS动画特效详解
查看>>
Linux VNC黑屏(转)
查看>>
Java反射简介
查看>>
react脚手架应用以及iview安装
查看>>
shell学习之用户管理和文件属性
查看>>
day8--socket网络编程进阶
查看>>