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

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

news 2026/4/4 7:55:42

【汇总】解决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

1990-2025年企业基金退出事件数据

数据介绍 企业投资机构通过公开招募&#xff0c;并购&#xff0c;同行转售等退出方式转让基金份额、底层项目股权、IPO、回购、清算等方式&#xff0c;从所投基金或项目中收回资金、实现收益或止损离场的完整交易与流程。 数据整理1990至2025年企业基金退出事件数据&#xff…...

编程新知 2026/4/4 7:07:49

OpenClaw学术场景应用：Qwen3-32B镜像辅助论文数据处理

OpenClaw学术场景应用&#xff1a;Qwen3-32B镜像辅助论文数据处理 1. 为什么需要自动化论文数据处理&#xff1f; 作为一名经常需要处理实验数据的研究人员&#xff0c;我过去常常花费大量时间在Excel和Python之间来回切换。数据清洗、格式转换、异常值检测这些重复性工作不仅…...

编程新知 2026/4/4 6:49:46

雪女-斗罗大陆-造相Z-Turbo与STM32的趣味结合：在嵌入式设备上展示AI生成的艺术

雪女-斗罗大陆-造相Z-Turbo与STM32的趣味结合&#xff1a;在嵌入式设备上展示AI生成的艺术 你有没有想过&#xff0c;把《斗罗大陆》里那位冰清玉洁的雪女&#xff0c;通过最新的AI绘画模型“造相Z-Turbo”生成出来&#xff0c;然后让她在一块小小的、几十块钱的STM32开发板的…...

编程新知 2026/4/4 6:21:38

PyTorch-2.x-Universal-Dev-v1.0镜像详解：预装库、国内源、GPU验证全攻略

PyTorch-2.x-Universal-Dev-v1.0镜像详解&#xff1a;预装库、国内源、GPU验证全攻略 1. 镜像概述与核心优势 PyTorch-2.x-Universal-Dev-v1.0镜像是一个专为深度学习开发者打造的高效开发环境。它基于官方PyTorch底包构建&#xff0c;经过精心优化和配置&#xff0c;旨在解决…...

编程新知 2026/4/4 5:19:01

如何用 Claude Code 快速完善接口文档和注释

在大多数项目中&#xff0c;代码本身并不是最大的问题。 真正让人头疼的是&#xff1a;没有文档&#xff0c;没有注释。常见情况包括&#xff1a; 接口没有说明&#xff0c;不知道怎么用方法没有注释&#xff0c;看不懂意图参数含义不清晰&#xff0c;只能靠猜老项目完全没有文…...

编程新知 2026/4/4 5:16:59

OpenClaw自然语言编程：千问3.5-27B理解模糊需求并执行

OpenClaw自然语言编程&#xff1a;千问3.5-27B理解模糊需求并执行 1. 当AI学会追问&#xff1a;模糊指令的自动化实践 上周日晚上11点&#xff0c;我盯着电脑里散落的387张旅行照片发呆——它们杂乱地堆在Downloads文件夹里&#xff0c;有手机直出的JPG、相机导入的RAW、截图…...

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

OpenClaw技能开发：为千问3.5-9B编写自定义自动化模块

OpenClaw技能开发&#xff1a;为千问3.5-9B编写自定义自动化模块 1. 为什么需要自定义技能&#xff1f; 去年冬天&#xff0c;当我第一次尝试用OpenClaw自动化处理日报时&#xff0c;发现现有的技能库无法满足我的特殊需求——需要从Jira提取数据后&#xff0c;自动生成符合团…...

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

DeepSeek LintCode 3706 · 满足条件的数对的数量 public long countValidPairs(int[] nums1, int[] nums2, int dif

这个问题是 LintCode 3706 “满足条件的数对的数量”&#xff0c;要求统计满足 nums1[i] - nums1[j] < nums2[i] - nums2[j] diff&#xff08;其中 i < j&#xff09;的数对 (i, j) 的数量。 问题理解 给定两个数组 nums1 和 nums2&#xff0c;以及一个整数 diff&#…...

编程新知 2026/4/4 4:03:57

宝塔面板PHP8.0如何快速安装Redis缓存扩展_在PHP设置的安装扩展模块中一键配置

宝塔面板PHP 8.0下无法一键安装Redis扩展&#xff0c;因官方源无适配预编译包且构建脚本不兼容ZTS/NTS、phpize路径及头文件要求&#xff1b;须用pecl手动编译redis-5.3.7并正确配置php.ini。宝塔面板 PHP 8.0 下无法通过「安装扩展」一键启用 Redis&#xff0c;是因为官方源里…...

编程新知 2026/4/4 3:49:53

OpenClaw本地化优势：Qwen3-14b_int4_awq模型数据安全实践

OpenClaw本地化优势&#xff1a;Qwen3-14b_int4_awq模型数据安全实践 1. 为什么选择本地化部署 去年我在处理一批客户调研数据时&#xff0c;遇到了一个棘手问题——调研报告包含大量敏感信息&#xff0c;但团队需要AI辅助分析。当时尝试了几个云端方案&#xff0c;要么因为数…...

编程新知 2026/4/4 3:45:52