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

朱雀 2021-09-23 15:50 546阅读 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能看出 页面已经成功渲染了  
![页面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTYyMDkw_size_16_color_FFFFFF_t_70]  
但是，跟我期望有出入，  
我希望的页面的跳转。  
通过查询资料，发现**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);
            }
        })
    }
    // 此方法有局限性，页面刷新后页面会还原。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTYyMDkw_size_16_color_FFFFFF_t_70]: /images/20210923/bbf6d62ac503431eaa6c4178603e7e7a.png