Springboot

2023-12-14 13:08| 来源: 网络整理| 查看: 265

Springboot-thymeleaf-ajax进行前后端交互前言后端向前端传递数据前端向后端传递数据在js中使用thymeleaf

前言

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

org.springframework.boot spring-boot-starter-thymeleaf org.springframework.boot spring-boot-starter-web 后端向前端传递数据

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:

Title Hello World！切片Id: 开始时间: 结束时间: 文本:

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

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

前端向后端传递数据

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

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

login 请输入你的姓名和密码提交 /*在这里编写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); } } }); }

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

以上段代码为例：

/*在这里编写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); } } }); }

即在标签中添加th:inline=“javascript”,数据绑定用[[${xxx}]]

【本文地址】

公司简介

联系我们