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

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

  • 问题发现
  • 问题解决
    • 方法一:直接跳转到指定URL(推荐)
    • 方法二:将返回的html内容,插入到页面某个元素中
    • 方法三:操作文档流
    • 方法四:使用form表单提交(推荐)
    • 方法五:把项目改为前后分离项目,交给前端跳转

问题发现

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

【汇总】解决Ajax请求后端接口,返回ModelAndView页面不跳转_第1张图片

问题解决

由于 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. 如果在文档加载期间(即在

你可能感兴趣的:(HTML,专治疑难杂症,前端,ajax,前端,mvc)