springboot+thymeleaf+ajax局部刷新

局部刷新

一般我们做web项目时,我们在网页上点击下一页或者跳转页面的时候,是将请求返还给后台,然后后台将数据传回前端,并返回页面。这时候你会发现页面被重新打开,也就是整个页面刷新了一次。
细心的人会发现浏览器的刷新按钮会变动一下,这时候的页面不再是原来的页面,而是重新打开的一个页面。
那么,怎么使页面该刷新的地方刷新,不需要刷新的地方不动呢?
这就需要ajax请求来实现局部刷新了,只要用了局部刷新,会发现特别的高大上-.-,
用了一时爽,一直用一直爽。

代码

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.springframework.org/schema/jdbc">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<div>
	<span>该区域不会被刷新</span>
	<Button id="button">刷新</Button>
	<div id="child_view">
		<span>该区域会被刷新</span>
	</div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script type = "text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;


    $('#button').bind('click', function () {
            refresh();
        });
   
    function refresh() {
        $.ajax({
            url: basePath + '/index/refresh',
            type: 'post',
            dataType: 'text',
            data: {

            },
            cache: false,
            async: true,
            success: function (data) {
                 $("#child_view").empty();
                 $("#child_view").append(data);
            }
        });
    }

    /*]]>*/
</script>
</body>
</html>

因为是使用了thymeleaf框架,所以要加上th:inline="javascript",并且还要加上

/*<![CDATA[*/
    var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;

    js代码

    /*]]>*/

因为是使用jqury,所以需要引用jqury
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
basePath用来url拼接,请求路径前面加上basePath就好了,如basePath + '/index/refresh'

refresh.html

<div id="child_view">
	<span>刷新的数据</span>
</div>

indexController跳转到index页面方法

@RequestMapping("/index")
public String toIndex(){
	return "index";
}

indexController刷新数据方法

@RequestMapping("/index/refresh")
public String refresh(){
	return "refresh";
}

运行

进入index页面,当点击button时候,child_view中的数据便会被refresh.html中的数据填充。
图片1
图片2

  • 4
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
### 回答1: springboot+thymeleaf项目是一种基于Java语言开发的Web应用程序。它采用了Spring Boot框架和Thymeleaf模板引擎,可以快速地搭建一个高效、可靠、易于维护的Web应用程序。该项目具有以下特点: 1. 简单易用:Spring Boot框架提供了一系列的自动化配置,使得开发者可以快速地搭建一个Web应用程序,而不需要过多的配置。 2. 高效可靠:Spring Boot框架采用了一系列的优化措施,使得应用程序具有高效、可靠的性能。 3. 易于维护:Thymeleaf模板引擎提供了一种简单、易于维护的模板语言,使得开发者可以快速地开发出具有良好可读性的Web应用程序。 总之,springboot+thymeleaf项目是一种非常优秀的Web应用程序开发框架,可以帮助开发者快速地开发出高效、可靠、易于维护的Web应用程序。 ### 回答2: Spring Boot是一个基于Spring框架的快速开发框架,这个框架的优点在于其简单易用,能够快速搭建一个Java Web应用程序,无需进行复杂的配置和繁琐的XML文件编写。而Thymeleaf则是一种Web和HTML的模板引擎,可以方便地处理文本、链接和表单等元素,支持多重继承和页面片段的复用等特性。 Spring Boot和Thymeleaf的结合,可以帮助开发人员更简便地搭建Web应用程序。在使用Spring Boot进行项目开发时,可以使用Thymeleaf来完成Web开发的视图层,进行模版板的渲染和数据绑定。这样就可以很直接地将数据通过模板引擎展现出来,且更方便。 在一个Spring Boot Thymeleaf项目的构建中,需要进行如下步骤: 1. 首先,引入Spring Boot和Thymeleaf的依赖以及其他必要的依赖,例如web和mybatis等相关组件。 2. 创建一个Controller类,并使用@Controller注解将类标记为Controller,编写具体的Action方法,这些方法可以用@RequestMapping或@GetMapping等注解来定义处理请求的URL路径和请求类型等相关信息。 3. 创建一个Model类,用于封装需要传输到前端的数据和相关操作等。 4. 在Controller内部设置Model变量并将相关数据注入Model,然后将需要展现的数据作为参数传递给Thymeleaf进行渲染,最后将渲染完成后的结果返回给前端页面展现。 5. 编写HTML页面,使用Thymeleaf标签来渲染动态数据。 需要注意的是,在进行Thymeleaf模板的渲染时,需要遵守一定的规范,例如页面中的数据变量名称需与Model中的属性名称一致,引入Thymeleaf命名空间等等。 总之,Spring Boot与Thymeleaf结合使用可以帮助开发人员快速地完成Web开发,整个过程简单而且高效。使用Thymeleaf能够降低模版制作的门槛,进一步提高开发效率,并且能够提供丰富的模版处理标签,使得页面制作更灵活。 ### 回答3: 近年来,使用SpringBootThymeleaf进行Web开发已经成为越来越多的开发者选择的方案。SpringBoot是一个基于Spring框架的快速Web应用开发框架,而Thymeleaf是一种基于HTML的模板引擎,其中需要了解的内容包括以下几点: 首先,SpringBoot框架的优点是非常明显的。它提供了很多便于使用的方法,例如自动装配,以及基于配置的许多默认值。这使得开发者可以花更少的时间和精力来开发项目,将重点放在业务逻辑和功能实现上。 其次,Thymeleaf是一种非常强大和灵活的模板引擎,其语法简单易懂,而且支持HTML5标准。它还提供了一些样式和布局的工具,以及易于使用的表达式和标签,使得Web页面开发更容易。 当然,SpringBoot集成Thymeleaf的过程也并不复杂。只需添thymeleaf-starter包依赖,SpringBoot将自动将Thymeleaf注册为默认的模板引擎。然后,您只需要编写Thymeleaf模板文件即可。 最后,值得注意的是,使用SpringBootThymeleaf进行Web开发的好处在于它们之间的紧密集成。这种紧密集成可以更轻松地创建动态和交互性的Web应用程序,这是传统的HTML和JavaScript不能提供的。 总的来说,SpringBootThymeleaf是一对非常强大且易于使用的Web开发工具组合,它们的出现大大提高了Web开发的效率和质量,同时也为开发人员提供了更好的开发体验。我们相信,这对于Web开发者来说是非常有价值的组合。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值