今天在学习SpringBoot时遇到了这么一个问题,
我想要的目的:通过ajax获取数据,并通过Model渲染View,实现跳转页面并渲染数据。
但是,ajax能过获取到HTML源代码,但是无法跳转页面。
先来看看我写的代码
JS:
function func2(){
$.ajax({
url : "/getData2",
type : "POST",
//dataType : "html",// 返回类型
data : {}, // 请求的数据 参数
success : function(data){ // 接收从后台返回的数据
console.log(data);
}
})
}
Controller层
@RequestMapping("/getData2")
public ModelAndView getData2(){
ModelAndView mv = new ModelAndView();
mv.setViewName("main"); // 渲染的页面 main.html
List list = userService.getData2();
mv.addObject("list",list);
mv.addObject("name","xzy");
return mv;
}
main.html【使用了thymeleaf模板】
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>main</title>
</head>
<body>
<h2 th:text="${name}"></h2>
<ul>
<li th:each="brand : ${list}" th:text="${brand.brandName}"></li>
</ul>
</body>
</html>
来看看结果:
从控制台 debugger能看出 页面已经成功渲染了
但是,跟我期望有出入,
我希望的页面的跳转。
通过查询资料,发现ajax只能实现局部刷新,无法执行整体的页面跳转并携带数据。
因此,我才用了以下两种方案,仅供参考
解决方案
解决方案1
把ajax的使用改为form表单的提交。
<form action="/getData2">
<button type="submit">click FORM</button>
</form>
解决方案2
使用 document.write() 方法重新写页面
function func2(){
$.ajax({
url : "/getData2",
type : "POST",
//dataType : "html",// 返回类型
success : function(data){ // 接收从后台返回的数据
document.write(data);
}
})
}
// 此方法有局限性,页面刷新后页面会还原。