【汇总】解决Ajax请求后端接口,返回ModelAndView页面不跳转 | 您所在的位置:网站首页 › ae接口跳转 › 【汇总】解决Ajax请求后端接口,返回ModelAndView页面不跳转 |
【汇总】解决Ajax请求后端接口,返回ModelAndView不跳转
问题发现问题解决方法一:直接跳转到指定URL(推荐)方法二:将返回的html内容,插入到页面某个元素中方法三:操作文档流方法四:使用form表单提交(推荐)方法五:把项目改为前后分离项目,交给前端跳转
问题发现
再开发工作中,可能会有些需求,用到前后端不分离的项目,某项功能可能会,前端发送post请求和参数到后端接口,由后端来确认跳转到指定页面,如果使用Ajax请求就会导致,前端页面不跳转的问题,如图所示,后端将整个页面返回了: 由于 Ajax 的特性,它更适合用于处理局部刷新、异步数据请求和动态内容更新等场景。而页面跳转和整个页面的渲染需要在浏览器中进行处理,这通常不是 Ajax 所擅长的领域。 方法一:直接跳转到指定URL(推荐)此方法适用于GET请求方式,请求接口,示例代码如下: window.location.href = "yourUrl/"+id;网上有很多方法是ajax请求后,跳转指定页面,这种方式跳转的页面,无法直接从后端拿数据,导致前后端是分离的,与现有关系互斥(不推荐)。 方法二:将返回的html内容,插入到页面某个元素中此方法,视具体业务需求操作,可以再当前页面中插入新的内容,可以不进行页面跳转,但是需要页面跳转的情况就不能使用次方法。 $.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() { //错误情况 } }); 如果在文档加载期间(即在 标签内或页面加载事件中)第一次调用 document.write(),它会将内容追加到文档的末尾。如果在文档加载完成后(例如在点击按钮或其他事件触发时)调用 document.write(),它会直接替换整个文档内容。不建议使用,这可能会导致意外的结果,特别是在复杂的页面结构中。 方法四:使用form表单提交(推荐)如果你的请求方式是POST,还需要带一些参数,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); }这样请求就可以进行页面跳转了。 方法五:把项目改为前后分离项目,交给前端跳转上面四种方法都没有帮助你解决此问题,那就把这个问题抛给前端把!!! |
CopyRight 2018-2019 实验室设备网 版权所有 |