【汇总】解决Ajax请求后端接口，返回ModelAndView页面不跳转
【汇总】解决Ajax请求后端接口，返回ModelAndView不跳转
- 问题发现
- 问题解决
- 方法一：直接跳转到指定URL（推荐）
- 方法二：将返回的html内容，插入到页面某个元素中
- 方法三：操作文档流
- 方法四：使用form表单提交（推荐）
- 方法五：把项目改为前后分离项目，交给前端跳转
问题发现
再开发工作中，可能会有些需求，用到前后端不分离的项目，某项功能可能会，前端发送post请求和参数到后端接口，由后端来确认跳转到指定页面，如果使用Ajax请求就会导致，前端页面不跳转的问题，如图所示，后端将整个页面返回了：
问题解决
由于 Ajax 的特性，它更适合用于处理局部刷新、异步数据请求和动态内容更新等场景。而页面跳转和整个页面的渲染需要在浏览器中进行处理，这通常不是 Ajax 所擅长的领域。
方法一：直接跳转到指定URL（推荐）
此方法适用于GET请求方式，请求接口，示例代码如下：
window.location.href = "yourUrl/"+id;
网上有很多方法是ajax请求后，跳转指定页面，这种方式跳转的页面，无法直接从后端拿数据，导致前后端是分离的，与现有关系互斥（不推荐）。
方法二：将返回的html内容，插入到页面某个元素中
此方法，视具体业务需求操作，可以再当前页面中插入新的内容，可以不进行页面跳转，但是需要页面跳转的情况就不能使用次方法。
<body><div id="your-element-id"></div>
</body>
$.ajax((url:"/your-backend-api-url'method: 'GET,dataType: "html,success: function(data) {//将返回的HTML$('#your-element-id').html(data);},error: function() {//错误情况}
});
方法三：操作文档流
document.write() 方法可向文档写入文本内容，可以是 HTML 代码。
$.ajax((url:"/your-backend-api-url'method: 'GET,dataType: "html,success: function(data) {document.write(data)},error: function() {//错误情况}
});
- 如果在文档加载期间（即在
<script>标签内或页面加载事件中）第一次调用document.write()，它会将内容追加到文档的末尾。 - 如果在文档加载完成后（例如在点击按钮或其他事件触发时）调用
document.write()，它会直接替换整个文档内容。
不建议使用，这可能会导致意外的结果，特别是在复杂的页面结构中。
方法四：使用form表单提交（推荐）
如果你的请求方式是POST，还需要带一些参数，form表单提交可以解决你的困扰。
<form action="url" method="POST"><!-- 表单输入字段 --><input type="text" name="fieldName" /><!-- 提交按钮 --><button type="submit">提交</button>
</form>
你也可以使用js，创建form表单元素，进行提交，示例代码如下：
function makeForm(data) {// 创建一个 formconst tempForm = document.createElement("form");tempForm.id = "tempForm";tempForm.name = "tempForm";// 添加到 body 中document.body.appendChild(tempForm);// 创建一个输入框const nameinput1 = document.createElement("input");nameinput1.type = "text";nameinput1.name = 'field';nameinput1.value = field;tempForm.appendChild(nameinput1);// 创建一个输入框const nameinput2 = document.createElement("input");nameinput2.type = "text";nameinput2.name = 'field2';nameinput2.value = field2;tempForm.appendChild(nameinput2);// form 的提交方式tempForm.method = "POST";// form 提交路径tempForm.action = "yourUrl";// 对该 form 执行提交tempForm.submit();// 删除该 formdocument.body.removeChild(tempForm);}
这样请求就可以进行页面跳转了。
方法五：把项目改为前后分离项目，交给前端跳转
上面四种方法都没有帮助你解决此问题，那就把这个问题抛给前端把！！！
相关文章：
【汇总】解决Ajax请求后端接口，返回ModelAndView页面不跳转
【汇总】解决Ajax请求后端接口，返回ModelAndView不跳转 问题发现问题解决方法一：直接跳转到指定URL（推荐）方法二：将返回的html内容，插入到页面某个元素中方法三：操作文档流方法四：使…...
网络安全进阶学习第九课——SQL注入介绍
文章目录 一、什么是注入二、什么是SQL注入三、SQL注入产生的原因四、SQL注入的危害五、SQL注入在渗透中的利用1、绕过登录验证：使用万能密码登录网站后台等。2、获取敏感数据3、文件系统操作4、注册表操作5、执行系统命令 六、如何挖掘SQL注入1、SQL注入漏洞分类按…...
一个计算机专业的学生数据结构这门课学到什么程度才能算学的还不错？
数据结构之所以重要是因为它处于算法中的基础地位，与解决实际问题关系密切；而之所以不重要是因为课本上能学到的所有实现都已经有人造过轮子了，甚至已经作为很多语言的标准API存在了。 换句话来说，在以后的编码生涯中，…...
[语义分割] ASPP不同版本对比（DeepLab、DeepLab v1、DeepLab v2、DeepLab v3、DeepLab v3+、LR-ASPP）
1. 引言 1.1 本文目的 本文主要对前段时间学习的 ASPP 模块进行对比，涉及到的 ASPP 有： ASPP in DeepLab v2，简称 ASPP v2ASPP in DeepLab v3，简称 ASPP v3ASPP in DeepLab v3，简称 ASPP v3ASPP in MobileNet v3&am…...
anaconda创建虚拟环境在D盘
【看一看就行，又是挺水的一期（每一季都掺和一点子水分也挺好）】 一、创建： conda create --prefixD:\python37\py37 python3.7 这下就在D盘了： 二、激活刚刚那个环境： activate D:\pyhton37\py37 &…...
Java设计模式之工厂设计模式
简介 工厂模式是一种常见的设计模式，用于创建对象的过程中，通过工厂类来封装对象的创建过程。其核心思想是将对象的创建和使用分离，从而降低耦合度，提高代码的可维护性和可扩展性。工厂模式通常包括三种类型：简单工厂…...
uniapp使用阿里图标
效果图： 前言 随着uniApp的深入人心，我司也陆续做了几个使用uniapp做的移动端跨平台软件，在学习使用的过程中深切的感受到了其功能强大和便捷，今日就如何在uniapp项目中使用阿里字体图标的问题为大家献上我的一点心得࿰…...
20230803激活手机realme GT Neo3
20230803激活手机realme GT Neo3 缘起： 新买的手机：realme GT Neo3 需要确认： 1、4K录像，时间不限制。 【以前的很多手机都是限制8/10/12/16分钟】 2、通话自动录音 3、定时开关机。 4、GPS记录轨迹不要拉直线：户外助…...
Spring Cloud Feign+Ribbon的超时机制
在一个项目中（数据产品），需要对接企业微信中第三方应用。在使用 Feign 的去调用微服务的用户模块用微信的 code 获取 access_token 以及用户工厂信息时出现 Feign 重试超时报错的情况，通过此篇文章记录问题解决的过程。 一、问题重…...
使用docker 搭建nginx + tomcat 集群
创建3个Tomcat容器，端口分别映射到 8080,8081,8082，使用数据卷挂载，分别将宿主机目录下的 /opt/module/docker/tomcat3/ROOT1/，/opt/module/docker/tomcat3/ROOT2/，/opt/module/docker/tomcat3/ROOT2/ 挂载到 容器内部…...
从Spring的角度看Memcached和Redis及操作
目录 Memcached和Redis的区别 适用场景 Memcached配置使用 Redis配置使用 在SpringBoot的框架里，有直连Redis的SDK却没有Memcached的，可见相比地位。不过各有各的适应场景，Redis这个单线程模型确实非常强。 Memcached和Redis的区别 共同…...
【C语言学习】C语言的基础数据类型
一、数据类型 1.整型 short(短整型) int（整型 long（长整型） long long（长整型）2.浮点型 float（单精度型） double（双精度型） long double3.字符类型 char…...
使用AIGC工具提升安全工作效率
新钛云服已累计为您分享760篇技术干货 在日常工作中，安全人员可能会涉及各种各样的安全任务，包括但不限于： 开发某些安全工具的插件，满足自己特定的安全需求；自定义github搜索工具，快速查找所需的安全资料、…...
HBase概述
HBase 一 HBase简介与环境部署 1.1 HBase简介&在Hadoop生态中的地位 1.1.1 什么是HBase HBase是一个分布式的、面向列的开源数据库HBase是Google BigTable的开源实现HBase不同于一般的关系数据库, 适合非结构化数据存储 1.1.2 BigTable BigTable是Google设计的分布式…...
)
el-popover全屏不显示(bug记录)
我做了一个el-table全屏展示的功能, 然后里面的el-popover在全屏后无法展示, 刚开始以为是写唯一的key或者ref, 发现写了也不行, 后来以为要写’:append-to-body“false”, 最后发现是我的外层的层级写得太高了; position: fixed; z-index: 9999; <div class"box"…...
react中使用redux-persist做持久化储存
某天下午折腾着玩的 – 笔记 安装相关依赖 npm install reduxjs/toolkit redux-persist redux react-redux// store.jsx import { configureStore, getDefaultMiddleware } from "reduxjs/toolkit"; import { persistStore, persistReducer } from "redux-per…...
)
【leetcode】203. 移除链表元素(easy)
给你一个链表的头节点 head 和一个整数 val ，请你删除链表中所有满足 Node.val val 的节点，并返回 新的头节点 。 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* Lis…...
InfiniBand、UCIe相关思考
InfiniBand、UCIe相关思考 内容1、InfiniBandInfiniBand是什么？InfiniBand的来历是什么？InfiniBand为什么重要？InfiniBand相较于Ethernet区别？同领域内还有其他哪些技术？InfiniBand中RDMA是种什么技术？ 内容…...
[C++项目] Boost文档 站内搜索引擎(3): 建立文档及其关键字的正排 倒排索引、jieba库的安装与使用...
之前的两篇文章: 第一篇文章介绍了本项目的背景, 获取了Boost库文档 🫦[C项目] Boost文档 站内搜索引擎(1): 项目背景介绍、相关技术栈、相关概念介绍…第二篇文章 分析实现了parser模块. 此模块的作用是 对所有文档html文件, 进行清理并汇总 🫦[C项目] …...
el-date-picker回显问题解决记录
el-date-picker回显问题记录 组件结构 <el-date-pickerv-model"time"type"datetimerange"range-separator"至"start-placeholder"开始日期"end-placeholder"结束日期"value-format"yyyy-MM-dd HH:mm:ss":defau…...
synchronized 学习
学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框，很难让人不联想到SQL注入，但提示都说了不是SQL注入，所以就不往这方面想了 先查看一下网页源码，发现一段JavaScript代码，有一个关键类ctfs…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现，展示如何创建和管理多个 OkHttpClient 实例，分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代，情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现，消费者对内容的“有感”程度，正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 （一）概念解析 TRS（Total Return Swap）收益互换是一种金融衍生工具，指交易双方约定在未来一定期限内，基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...
Go 并发编程基础：通道（Channel）的使用
在 Go 中，Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式，用于在多个 Goroutine 之间传递数据，从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...
AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而，传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案，能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...