仓库网站开发,大气医院网站源码,wordpress KeyWords优化,oneup wordpress【汇总】解决Ajax请求后端接口#xff0c;返回ModelAndView不跳转 问题发现问题解决方法一#xff1a;直接跳转到指定URL#xff08;推荐#xff09;方法二#xff1a;将返回的html内容#xff0c;插入到页面某个元素中方法三#xff1a;操作文档流方法四#xff1a;使… 【汇总】解决Ajax请求后端接口返回ModelAndView不跳转 问题发现问题解决方法一直接跳转到指定URL推荐方法二将返回的html内容插入到页面某个元素中方法三操作文档流方法四使用form表单提交推荐方法五把项目改为前后分离项目交给前端跳转 问题发现
再开发工作中可能会有些需求用到前后端不分离的项目某项功能可能会前端发送post请求和参数到后端接口由后端来确认跳转到指定页面如果使用Ajax请求就会导致前端页面不跳转的问题如图所示后端将整个页面返回了 问题解决
由于 Ajax 的特性它更适合用于处理局部刷新、异步数据请求和动态内容更新等场景。而页面跳转和整个页面的渲染需要在浏览器中进行处理这通常不是 Ajax 所擅长的领域。
方法一直接跳转到指定URL推荐
此方法适用于GET请求方式请求接口示例代码如下
window.location.href yourUrl/id;网上有很多方法是ajax请求后跳转指定页面这种方式跳转的页面无法直接从后端拿数据导致前后端是分离的与现有关系互斥不推荐。
方法二将返回的html内容插入到页面某个元素中
此方法视具体业务需求操作可以再当前页面中插入新的内容可以不进行页面跳转但是需要页面跳转的情况就不能使用次方法。
bodydiv idyour-element-id/div
/body$.ajax((url:/your-backend-api-urlmethod: GET,dataType: html,success: function(data) {//将返回的HTML$(#your-element-id).html(data);},error: function() {//错误情况}
});方法三操作文档流
document.write() 方法可向文档写入文本内容可以是 HTML 代码。
$.ajax((url:/your-backend-api-urlmethod: GET,dataType: html,success: function(data) {document.write(data)},error: function() {//错误情况}
});如果在文档加载期间即在 script 标签内或页面加载事件中第一次调用 document.write()它会将内容追加到文档的末尾。如果在文档加载完成后例如在点击按钮或其他事件触发时调用 document.write()它会直接替换整个文档内容。
不建议使用这可能会导致意外的结果特别是在复杂的页面结构中。
方法四使用form表单提交推荐
如果你的请求方式是POST还需要带一些参数form表单提交可以解决你的困扰。
form actionurl methodPOST!-- 表单输入字段 --input typetext namefieldName /!-- 提交按钮 --button typesubmit提交/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);}这样请求就可以进行页面跳转了。
方法五把项目改为前后分离项目交给前端跳转
上面四种方法都没有帮助你解决此问题那就把这个问题抛给前端把
