Springboot-thymeleaf-ajax进行前后端交互
前言
前台的视图模版我使用的是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>
即在标签中添加th:inline=“javascript”,数据绑定用[[${xxx}]]