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

 

 重新跳转访问:

 

即可解决乱码问题!!!

相关文章
|
2月前
|
机器学习/深度学习 编解码 JSON
混元OCR模型宣布开源,参数仅1B,多项核心能力SOTA
腾讯混元推出全新开源OCR模型HunyuanOCR,仅1B参数,基于原生多模态架构,实现端到端高效推理。在复杂文档解析、文字检测识别等多场景表现卓越,支持14种小语种翻译,广泛适用于票据抽取、视频字幕识别等应用,多项指标达业界SOTA水平。
552 8
|
9月前
|
Prometheus 监控 Cloud Native
Prometheus配置docker采集器
本文介绍了如何使用 Prometheus 监控 Docker 容器,涵盖环境准备、配置文件编写及服务启动等步骤。首先确保安装 Docker 和 Docker Compose,接着通过 `docker-compose.yml` 配置 Prometheus 和示例应用。创建 `prometheus.yml` 指定数据采集目标,最后用 `docker-compose up -d` 启动服务。文章还展示了甘特图和类图,帮助理解服务状态与关系,助力提升系统可靠性和可维护性。
372 11
|
12月前
|
Java 调度 Spring
Spring之定时任务基本使用篇
本文介绍了在Spring Boot项目中使用定时任务的基本方法。主要通过`@Scheduled`注解实现,需添加`@EnableScheduling`开启定时任务功能。文中详细解析了Cron表达式的语法及常见实例,如每秒、每天特定时间执行等。此外,还探讨了多个定时任务的执行方式(并行或串行)及其潜在问题,并留待后续深入讨论。
573 64
|
消息中间件 存储 监控
消息队列通信的优缺点
【10月更文挑战第29天】消息队列通信具有诸多优点,如解耦性强、异步通信、缓冲削峰等,能够有效地提高系统的灵活性、可扩展性和稳定性。但同时也存在一些缺点,如系统复杂性增加、性能开销、数据一致性挑战和实时性受限等。在实际应用中,需要根据具体的业务需求和场景,权衡其优缺点,合理地选择和使用消息队列通信机制,以实现系统的高效运行和优化。
|
Java 调度 开发者
spring的@Scheduled()有几种定时模式?
【10月更文挑战第12天】spring的@Scheduled()有几种定时模式?
549 1
|
Kubernetes 负载均衡 安全
【技术揭秘】阿里云容器服务Ingress高级玩法:如何轻松实现客户端原始IP透传,提升应用安全性与用户体验!
【8月更文挑战第17天】本文介绍如何在阿里云容器服务中配置Ingress以透传客户端原始IP地址。通过Ingress可实现HTTP负载均衡等功能。需在Ingress定义文件中添加特定注解,如`nginx.ingress.kubernetes.io/real-ip-header: X-Real-IP`。创建并应用Ingress配置后,后端服务可通过读取`X-Real-IP`头获取真实IP。此举有助于安全审计及流量分析。
658 2
|
消息中间件 Java 数据库
Spring Boot中如何实现分布式事务
Spring Boot中如何实现分布式事务
|
Kubernetes Nacos 数据库
nacos常见问题之修改nacos密码后报错403如何解决
Nacos是阿里云开源的服务发现和配置管理平台,用于构建动态微服务应用架构;本汇总针对Nacos在实际应用中用户常遇到的问题进行了归纳和解答,旨在帮助开发者和运维人员高效解决使用Nacos时的各类疑难杂症。
|
Python
【Python】五子棋 —— 摸鱼必备的小项目~
摸鱼必备小项目,你值得拥有~
765 1
【Python】五子棋 —— 摸鱼必备的小项目~
【多线程】两个线程轮流打印数字1-100,一个打奇数一个打偶数,顺序打印
【多线程】两个线程轮流打印数字1-100,一个打奇数一个打偶数,顺序打印