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

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

问题发现

再开发工作中,可能会有些需求,用到前后端不分离的项目,某项功能可能会,前端发送post 请求和参数到后端接口,由后端来确认跳转到指定页面,如果使用Ajax请求就会导致,前端页面不跳转的问题,如图所示,后端将整个页面返回了:

问题解决

由于 Ajax 的特性,它更适合用于处理局部刷新、异步数据请求和动态内容更新等场景。而页面跳转和整个页面的渲染需要在浏览器中进行处理,这通常不是 Ajax 所擅长的领域。

方法一:直接跳转到指定URL(推荐)

此方法适用于GET请求方式,请求接口,示例代码如下:

javascript 复制代码
window.location.href = "yourUrl/"+id;

网上有很多方法是ajax 请求后,跳转指定页面,这种方式跳转的页面,无法直接从后端拿数据,导致前后端是分离的,与现有关系互斥(不推荐)。

方法二:将返回的html内容,插入到页面某个元素中

此方法,视具体业务需求操作,可以再当前页面中插入新的内容,可以不进行页面跳转,但是需要页面跳转的情况就不能使用次方法。

html 复制代码
<body>
    <div id="your-element-id"></div>
</body>
javascript 复制代码
$.ajax((
	url:"/your-backend-api-url'
	method: 'GET,
	dataType: "html,
	success: function(data) {
		//将返回的HTML
		$('#your-element-id').html(data);
	},
	error: function() {
		//错误情况
	}
});

方法三:操作文档流

document.write() 方法可向文档写入文本内容,可以是 HTML 代码。

javascript 复制代码
$.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表单提交可以解决你的困扰。

html 复制代码
<form action="url" method="POST">
  <!-- 表单输入字段 -->
  <input type="text" name="fieldName" />
  <!-- 提交按钮 -->
  <button type="submit">提交</button>
</form>

你也可以使用js ,创建form表单元素,进行提交,示例代码如下:

javascript 复制代码
	function makeForm(data) {
            // 创建一个 form
            const 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();
            // 删除该 form
            document.body.removeChild(tempForm);
        }

这样请求就可以进行页面跳转了。

方法五:把项目改为前后分离项目,交给前端跳转

上面四种方法都没有帮助你解决此问题,那就把这个问题抛给前端把!!!

相关推荐
黑云压城After12 分钟前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
未来之窗软件服务2 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友2 小时前
什么是断言?
前端·后端·安全
FIN66683 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4953 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1243 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树3 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66683 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能
im_AMBER3 小时前
杂记 14
前端·笔记·学习·web
牧杉-惊蛰4 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js