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

最新推荐文章于 2023-12-11 16:16:53 发布

成为大佬先秃头

最新推荐文章于 2023-12-11 16:16:53 发布

阅读量1.8k

点赞数 1

分类专栏： HTML 专治疑难杂症前端文章标签： ajax 前端 mvc

本文链接：https://blog.csdn.net/qq_39940674/article/details/132059451

版权

专治疑难杂症同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

前端

10 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

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

问题发现
问题解决

问题发现

再开发工作中，可能会有些需求，用到前后端不分离的项目，某项功能可能会，前端发送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) {
            // 创建一个 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);
        }