天天看点

使用Ajax+springmvc[ModelAndView]+thymeleaf使用中遇到的跳转页面问题

今天在学习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+springmvc[ModelAndView]+thymeleaf使用中遇到的跳转页面问题

但是,跟我期望有出入,

我希望的页面的跳转。

通过查询资料,发现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);
        }
    })
}
// 此方法有局限性,页面刷新后页面会还原。