当前位置： 首页 > news >正文

【汇总】解决Ajax请求后端接口，返回ModelAndView页面不跳转

news 2026/4/4 5:55:58

【汇总】解决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() {//错误情况}
});
  1. 如果在文档加载期间（即在 <script> 标签内或页面加载事件中）第一次调用 document.write()，它会将内容追加到文档的末尾。
  2. 如果在文档加载完成后（例如在点击按钮或其他事件触发时）调用 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请求后端接口&#xff0c;返回ModelAndView不跳转 问题发现问题解决方法一&#xff1a;直接跳转到指定URL&#xff08;推荐&#xff09;方法二&#xff1a;将返回的html内容&#xff0c;插入到页面某个元素中方法三&#xff1a;操作文档流方法四&#xff1a;使…...

编程日记 2023/8/4 1:29:43

网络安全进阶学习第九课——SQL注入介绍

文章目录 一、什么是注入二、什么是SQL注入三、SQL注入产生的原因四、SQL注入的危害五、SQL注入在渗透中的利用1、绕过登录验证&#xff1a;使用万能密码登录网站后台等。2、获取敏感数据3、文件系统操作4、注册表操作5、执行系统命令 六、如何挖掘SQL注入1、SQL注入漏洞分类按…...

编程日记 2023/8/4 1:28:42

一个计算机专业的学生数据结构这门课学到什么程度才能算学的还不错？

数据结构之所以重要是因为它处于算法中的基础地位&#xff0c;与解决实际问题关系密切&#xff1b;而之所以不重要是因为课本上能学到的所有实现都已经有人造过轮子了&#xff0c;甚至已经作为很多语言的标准API存在了。 换句话来说&#xff0c;在以后的编码生涯中&#xff0c…...

编程日记 2023/8/4 1:27:40

[语义分割] ASPP不同版本对比（DeepLab、DeepLab v1、DeepLab v2、DeepLab v3、DeepLab v3+、LR-ASPP）

1. 引言 1.1 本文目的 本文主要对前段时间学习的 ASPP 模块进行对比&#xff0c;涉及到的 ASPP 有&#xff1a; ASPP in DeepLab v2&#xff0c;简称 ASPP v2ASPP in DeepLab v3&#xff0c;简称 ASPP v3ASPP in DeepLab v3&#xff0c;简称 ASPP v3ASPP in MobileNet v3&am…...

编程日记 2023/8/4 1:26:39

anaconda创建虚拟环境在D盘

【看一看就行&#xff0c;又是挺水的一期&#xff08;每一季都掺和一点子水分也挺好&#xff09;】 一、创建&#xff1a; conda create --prefixD:\python37\py37 python3.7 这下就在D盘了&#xff1a; 二、激活刚刚那个环境&#xff1a; activate D:\pyhton37\py37​ &…...

编程日记 2023/8/4 1:25:38

Java设计模式之工厂设计模式

简介 工厂模式是一种常见的设计模式&#xff0c;用于创建对象的过程中&#xff0c;通过工厂类来封装对象的创建过程。其核心思想是将对象的创建和使用分离&#xff0c;从而降低耦合度&#xff0c;提高代码的可维护性和可扩展性。工厂模式通常包括三种类型&#xff1a;简单工厂…...

编程日记 2023/8/4 1:24:37

uniapp使用阿里图标

效果图&#xff1a; 前言 随着uniApp的深入人心&#xff0c;我司也陆续做了几个使用uniapp做的移动端跨平台软件&#xff0c;在学习使用的过程中深切的感受到了其功能强大和便捷&#xff0c;今日就如何在uniapp项目中使用阿里字体图标的问题为大家献上我的一点心得&#xff0…...

编程日记 2023/8/4 1:23:36

20230803激活手机realme GT Neo3

20230803激活手机realme GT Neo3 缘起&#xff1a; 新买的手机&#xff1a;realme GT Neo3 需要确认&#xff1a; 1、4K录像&#xff0c;时间不限制。 【以前的很多手机都是限制8/10/12/16分钟】 2、通话自动录音 3、定时开关机。 4、GPS记录轨迹不要拉直线&#xff1a;户外助…...

编程日记 2023/8/4 1:22:34

Spring Cloud Feign+Ribbon的超时机制

在一个项目中&#xff08;数据产品&#xff09;&#xff0c;需要对接企业微信中第三方应用。在使用 Feign 的去调用微服务的用户模块用微信的 code 获取 access_token 以及用户工厂信息时出现 Feign 重试超时报错的情况&#xff0c;通过此篇文章记录问题解决的过程。 一、问题重…...

编程日记 2023/8/4 1:21:30

使用docker 搭建nginx + tomcat 集群

创建3个Tomcat容器&#xff0c;端口分别映射到 8080,8081,8082&#xff0c;使用数据卷挂载&#xff0c;分别将宿主机目录下的 /opt/module/docker/tomcat3/ROOT1/&#xff0c;/opt/module/docker/tomcat3/ROOT2/&#xff0c;/opt/module/docker/tomcat3/ROOT2/ 挂载到 容器内部…...

编程日记 2023/8/4 1:20:29

从Spring的角度看Memcached和Redis及操作

目录 Memcached和Redis的区别 适用场景 Memcached配置使用 Redis配置使用 在SpringBoot的框架里&#xff0c;有直连Redis的SDK却没有Memcached的&#xff0c;可见相比地位。不过各有各的适应场景&#xff0c;Redis这个单线程模型确实非常强。 Memcached和Redis的区别 共同…...

编程日记 2023/8/4 1:19:26

【C语言学习】C语言的基础数据类型

一、数据类型 1.整型 short(短整型) int&#xff08;整型 long&#xff08;长整型&#xff09; long long&#xff08;长整型&#xff09;2.浮点型 float&#xff08;单精度型&#xff09; double&#xff08;双精度型&#xff09; long double3.字符类型 char…...

编程日记 2023/8/4 1:18:25

使用AIGC工具提升安全工作效率

新钛云服已累计为您分享760篇技术干货 在日常工作中&#xff0c;安全人员可能会涉及各种各样的安全任务&#xff0c;包括但不限于&#xff1a; 开发某些安全工具的插件&#xff0c;满足自己特定的安全需求&#xff1b;自定义github搜索工具&#xff0c;快速查找所需的安全资料、…...

编程日记 2023/8/4 1:17:24

HBase概述

HBase 一 HBase简介与环境部署 1.1 HBase简介&在Hadoop生态中的地位 1.1.1 什么是HBase HBase是一个分布式的、面向列的开源数据库HBase是Google BigTable的开源实现HBase不同于一般的关系数据库, 适合非结构化数据存储 1.1.2 BigTable BigTable是Google设计的分布式…...

编程日记 2023/8/4 1:16:23

el-popover全屏不显示(bug记录)

我做了一个el-table全屏展示的功能, 然后里面的el-popover在全屏后无法展示, 刚开始以为是写唯一的key或者ref, 发现写了也不行, 后来以为要写’:append-to-body“false”, 最后发现是我的外层的层级写得太高了; position: fixed; z-index: 9999; <div class"box"…...

编程日记 2023/8/4 1:15:20

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…...

编程日记 2023/8/4 1:14:19

【leetcode】203. 移除链表元素(easy)

给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* Lis…...

编程日记 2023/8/4 1:13:18

InfiniBand、UCIe相关思考

InfiniBand、UCIe相关思考 内容1、InfiniBandInfiniBand是什么&#xff1f;InfiniBand的来历是什么&#xff1f;InfiniBand为什么重要&#xff1f;InfiniBand相较于Ethernet区别&#xff1f;同领域内还有其他哪些技术&#xff1f;InfiniBand中RDMA是种什么技术&#xff1f; 内容…...

编程日记 2023/8/4 1:12:17

[C++项目] Boost文档 站内搜索引擎(3): 建立文档及其关键字的正排 倒排索引、jieba库的安装与使用...

之前的两篇文章: 第一篇文章介绍了本项目的背景, 获取了Boost库文档 &#x1fae6;[C项目] Boost文档 站内搜索引擎(1): 项目背景介绍、相关技术栈、相关概念介绍…第二篇文章 分析实现了parser模块. 此模块的作用是 对所有文档html文件, 进行清理并汇总 &#x1fae6;[C项目] …...

编程日记 2023/8/4 1:11:16

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…...

编程日记 2023/8/4 1:10:15

Retinaface+CurricularFace与STM32的结合：边缘设备人脸识别

RetinafaceCurricularFace与STM32的结合&#xff1a;边缘设备人脸识别 1. 引言 想象一下这样的场景&#xff1a;一个智能门禁系统能够准确识别每一位住户&#xff0c;无需连接云端服务器&#xff0c;响应速度极快&#xff0c;而且完全保护用户隐私。或者一个工业质检设备&…...

编程新知 2026/4/4 5:25:04

Phi-4-mini-reasoning部署教程：SSL证书配置实现https安全访问Web界面

Phi-4-mini-reasoning部署教程&#xff1a;SSL证书配置实现https安全访问Web界面 1. 环境准备 在开始配置SSL证书前&#xff0c;请确保您已经完成以下准备工作&#xff1a; 已部署Phi-4-mini-reasoning模型并正常运行拥有服务器管理员权限已获取有效的域名&#xff08;可以是…...

编程新知 2026/4/4 5:17:00

从Simulink仿真到硬件实现：DAB双有源全桥的PID参数‘手感’如何传递？

从虚拟到现实&#xff1a;DAB双有源全桥PID参数迁移实战指南 当你在Simulink中看到完美的DAB动态响应波形时&#xff0c;那种成就感就像解开一道复杂的数学题。但现实往往给你当头一棒——同样的PID参数烧录到DSP后&#xff0c;示波器上的波形却像喝醉了一样东倒西歪。这不是你…...

编程新知 2026/4/4 5:08:56

双模型协作！OpenClaw同时调用Qwen3-4B与Codex完成编程任务

双模型协作&#xff01;OpenClaw同时调用Qwen3-4B与Codex完成编程任务 1. 为什么需要双模型协作 作为一个经常需要写代码的技术博主&#xff0c;我一直在寻找更高效的编程方式。传统的单模型调用虽然能完成基础任务&#xff0c;但在复杂场景下往往力不从心——要么生成的代码…...

编程新知 2026/4/4 4:50:30

避坑指南：从聚宽迁移到QMT必须知道的5个细节（含Redis连接异常处理）

从聚宽迁移到QMT的实战避坑指南&#xff1a;Redis连接与xtquant重连机制详解 当量化团队需要从聚宽平台迁移到QMT时&#xff0c;往往会遇到一系列技术细节上的挑战。本文将聚焦五个最容易被忽视但至关重要的技术环节&#xff0c;特别是Redis连接池管理和xtquant重连机制这两个直…...

编程新知 2026/4/4 3:25:39

基于TuGraph的医疗知识图谱构建与智能问答实践

1. 医疗知识图谱构建全流程解析 医疗知识图谱作为医疗信息化的重要基础设施&#xff0c;正在深刻改变着医疗数据的组织方式和应用模式。不同于传统的关系型数据库&#xff0c;图数据库能够更直观地展现疾病、症状、药物等实体间的复杂关系。我们以TuGraph图数据库为例&#xff…...

编程新知 2026/4/4 3:23:37

ArduinoAPI：mbed OS 上的轻量级 Arduino 兼容层

1. ArduinoAPI 库概述ArduinoAPI 是一个面向嵌入式开发者的轻量级兼容层库&#xff0c;其核心定位并非复刻 Arduino IDE 的完整生态&#xff0c;而是在 mbed OS 平台上提供一套语义兼容、接口简洁、可裁剪的 Arduino Core API 子集。该库不依赖 Arduino IDE 或 avr-gcc 工具链&…...

编程新知 2026/4/4 2:25:17

Arduino嵌入式工具库解析：按键消抖、字符串格式化与I²C通信

1. 项目概述utils_asukiaaa是一个面向 Arduino 平台的轻量级工具函数库&#xff0c;聚焦于三类高频嵌入式开发场景&#xff1a;机械按键消抖与状态机管理、字符串格式化处理、IC 总线设备通信封装。该库采用 C 命名空间组织&#xff08;utils_asukiaaa::button/utils_asukiaaa:…...

编程新知 2026/4/4 2:21:16

OpenClaw+gemma-3-12b-it双剑合璧：5个提升效率的真实案例

OpenClawgemma-3-12b-it双剑合璧&#xff1a;5个提升效率的真实案例 1. 为什么选择这个组合&#xff1f; 去年我开始尝试用AI自动化处理日常工作&#xff0c;试过不少方案&#xff0c;最终锁定OpenClawgemma-3-12b-it这个组合。原因很简单&#xff1a;OpenClaw能像真人一样操…...

编程新知 2026/4/4 2:15:12

12306高铁票API预定接口开发文档

接口地址： http://接口域名/train/queryLeftTicket 返回格式： json 请求方法： get/post 请求示例： http://接口域名/train/queryLeftTicket?appKey=您申请的APPKEY&fromStation=苏州&toStation=昆山&fromDate=2023-12-15 请求参数： 参数名称 类型 必填 说明 …...

编程新知 2026/4/4 1:50:47