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

最新推荐文章于 2024-04-03 09:45:51 发布

暴走的Aluuubbarrrr

最新推荐文章于 2024-04-03 09:45:51 发布

阅读量1k

点赞数 3

分类专栏： xzy·SpringBoot Java xxxzy 文章标签： ajax springmvc 页面跳转 modelandview java

本文链接：https://blog.csdn.net/qq_37162090/article/details/103921107

版权

Java 同时被 3 个专栏收录

29 篇文章 19 订阅

订阅专栏

xxxzy

7 篇文章 0 订阅

订阅专栏

xzy·SpringBoot

1 篇文章 0 订阅

订阅专栏

今天在学习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);
        }
    })
}
// 此方法有局限性，页面刷新后页面会还原。