Springboot-thymeleaf-ajax进行前后端交互

最新推荐文章于 2023-12-23 23:10:03 发布

小花不写代码

最新推荐文章于 2023-12-23 23:10:03 发布

阅读量7.4k

点赞数 18

分类专栏： Java 文章标签： jquery html

本文链接：https://blog.csdn.net/Littleflowers/article/details/115269953

版权

Java 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在SpringBoot项目中使用Thymeleaf和Ajax进行前后端数据交互。首先，展示了如何通过Thymeleaf从后端向前端传递数据，包括字符串和对象。接着，利用Ajax实现前端向后端异步提交数据，并在后端处理数据。最后，演示了在JavaScript中如何结合Thymeleaf来动态绑定数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

前台的视图模版我使用的是thymeleaf，它是SpringBoot官方推荐的一个html5模版引擎，SpringBoot官方不推荐使用jsp，SpringBoot官网也是使用这个模版引擎做的。在使用thymeleaf前，确保Pom中存在thymeleaf依赖，即：

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
</dependency>

后端向前端传递数据

Axis实体类:

public class Axis {
    private String Id;
    private String start;
    private String end;
    private String text;

    public String getId() {
        return Id;
    }

    public void setId(String id) {
        Id = id;
    }

    public String getStart() {
        return start;
    }

    public void setStart(String start) {
        this.start = start;
    }

    public String getEnd() {
        return end;
    }

    public void setEnd(String end) {
        this.end = end;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }
}

helloController类：

@Controller
public class helloController {
    @RequestMapping("/index")
    public String sayHello(ModelMap modelMap)
    {
        String message = "I am so vegetable!";
        modelMap.put("msg",message);//传递字符串类型变量
        Axis axis = new Axis();
        axis.setId("1");
        axis.setStart("2854");
        axis.setEnd("3736");
        axis.setText("快乐debug");
        modelMap.put("axis",axis);//传递一个类
        return "index";
    }
}

index.html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Hello World！
<!--获取单个值-->
<div th:text="${msg}"></div>
<!--获取一个对象的值-->
切片Id:<div th:text="${axis.Id}"></div>
开始时间:<div th:text="${axis.start}"></div>
结束时间:<div th:text="${axis.end}"></div>
文本:<div th:text="${axis.text}"></div>
</body>
</html>

重启DemoApplication, 打开网址http://localhost:8080/index
在这里插入图片描述

thymeleaf的其他用法可以参考此文章,8.5以后的部分

前端向后端传递数据

在这里，我使用ajax实现数据的异步传输。我们将主要步骤概括为：

1.在前端页面中引入jQuery
2.创建两个输入框，一个按钮用于输入数据和事件提交。
3.在js中编写事件，使用ajax进行数据提交
4.在后端对应的control层中编写对应的事件处理函数
login.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <!--引入jQuery包用于使用ajax-->
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<h1>请输入你的姓名和密码</h1>
<!--创建两个input输入框，定义id分别为name,age-->
<input type="text" id="name" name="name" placeholder="姓名">
<br>
<input type="text" id="password" name="password" placeholder="密码">
<br>
<!--创建button按钮，点击则激发submit()事件-->
<button onclick="submit();">提交</button>

</body>
<script>
    /*在这里编写submit()事件*/
    function submit() {
        $.ajax({
            url: "/loginIn", /*数据提交到/loginIn处*/
            type: "POST",  /*采用POST方法提交*/
            data: { "name": $("#name").val(),"password":$("#password").val()},  /*提交的数据（json格式），从输入框中获取*/
            dataType:'JSON',
            cache:false,
            success:function (result)
            {
                if(result.code==0)
                {
                    alert(result.msg);
                }
                else
                {
                    alert(result.msg);
                }
            }

        });
    }
</script>

</html>

loginIn函数：

	@RequestMapping("/loginIn")
    @ResponseBody
    public BaseResult login(String name, String password)
    {
        BaseResult result = new BaseResult();
        if(name.length()!=0&&password.length()!=0)
        {
            result.setCode(0);
            result.setMsg("你的名字是"+name+",你的密码是"+password);
        }
        else
        {
            result.setCode(1);
            result.setMsg("error!");
        }
        return result;
    }

在js中使用thymeleaf

以上段代码为例：

<script th:inline="javascript">
    /*在这里编写submit()事件*/
    function submit() {
        $.ajax({
            url: "/loginIn", /*数据提交到/loginIn处*/
            type: "POST",  /*采用POST方法提交*/
            data: { "name": [[${msg}]],"password":$("#password").val()},  /*提交的数据（json格式），从输入框中获取*/
            dataType:'JSON',
            cache:false,
            success:function (result)
            {
                if(result.code==0)
                {
                    alert(result.msg);
                }
                else
                {
                    alert(result.msg);
                }
            }

        });
    }
</script>