通过Ajax和SpringBoot交互的示例

摘要: springboot+ajax的示例，视图使用的thymeleaf

1. 开始

1.1 说明

很久没有管理博客，这几天想了想，还是打算把日常学习的东西记录下来。公司最近项目需要用到springboot，微服务在spring社区的崛起，使得
springboot受到了更多的青睐。使用springboot这个微框架，能够更加快速的构建web程序，相比于之前的springmvc，Struts2等框架，不需要
写各种各样繁琐的配置文件，只需要在pom文件中依赖parent POM，就能够大大的简化xml配置。
更多的不做介绍，可以参考spring官网，或者CSDN上其他博客。

1.2 准备

环境：JDK1.8+maven3

IDE: intellij idea

IDE我使用的是intellij idea，它对Spring，Apache的很多项目支持都非常好，相比于eclipse，idea能更快速的开发，不过很可惜是收费的，免费版很多高级的功能都无法使用。通过idea可以直接根据你的需求构建出springboot项目，不需要手动的创建maven项目，加入pom依赖。

2. 编码

项目总体结构

2.1 Pom依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion>

<groupId>org.springboot</groupId>
<artifactId>springbootajax</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>

<name>SpringBootAjax</name>
<description>Demo project for Spring Boot</description>

<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.3.6.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>

<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>

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

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

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>

<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>

</project>

2.2 Entity

User实体类，不涉及数据库访问

package org.springboot.entity;

/** * Created by Intellij IDEA. * * @Author LUOLIANG * @Date 2016/8/2 * @Comment */
public class User {
private Integer id;

private String name;

private String sex;

private Integer age;

private String role;

public Integer getId() {
return id;
}

publi
7fe0
c void setId(Integer id) {
this.id = id;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getSex() {
return sex;
}

public void setSex(String sex) {
this.sex = sex;
}

public Integer getAge() {
return age;
}

public void setAge(Integer age) {
this.age = age;
}

public String getRole() {
return role;
}

public void setRole(String role) {
this.role = role;
}
}

2.3 Controller

package org.springboot.web;

import org.springboot.entity.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.List;

/** * Created by Intellij IDEA. * * @Author LUOLIANG * @Date 2016/8/2 * @Comment */
@Controller
@RequestMapping("/hello")
public class HelloController {

@RequestMapping(value = "/index", method = RequestMethod.GET)
public String index(ModelMap modelMap) {
modelMap.put("msg", "SpringBoot Ajax 示例");

return "index";
}

@RequestMapping(value = "/home", method = RequestMethod.GET)
@ResponseBody
public String home() {

return "home";
}

@RequestMapping(value = "/data", method = RequestMethod.POST)
@ResponseBody
public List<User> data() {
List<User> list = new ArrayList<User>();

for (int i = 0; i < 10; i++) {
User user = new User();
user.setId(i + 1);
user.setName("springboot" + i);
user.setSex("male");
user.setAge(i + 1);
user.setRole("developer");

list.add(user);
}

return list;
}
}

controller中data方法用于向前台的ajax返回请求的json数据。

2.4 前台页面+js

前台的视图模版我使用的是thymeleaf，它是springboot官方推荐的一个html5模版引擎，springboot官方不推荐使用jsp，springboot官网也是使用这个模版做的。
通过jQuery的ajax向Controller发送请求，在js回调函数中处理返回的数据，页面我用bootstrap快速的做了一个表格，渲染列表使用了一个叫做avalonjs的迷你mvvm框架，生成虚拟dom，关于avalonjs也不做过多的介绍，可以参考官网。[这里写链接内容](http://avalonjs.coding.me/)

前端页面

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head lang="en">
<meta charset="UTF-8"/>
<title></title>
<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}"/>
</head>
<body ms-controller="viewmodel">
<h1 th:text="${msg}">Hello World</h1>
<button type="button" class="btn btn-primary" style="margin: 10px;" ms-click="@request">{{@text}}</button>
<table class="table table-striped">
<thead>
<tr>
<td class="active">id</td>
<td class="success">姓名</td>
<td class="warning">性别</td>
<td class="danger">年龄</td>
<td class="info">角色</td>
</tr>
</thead>
<tbody>
<tr ms-for="el in @datalist">
<td >{{el.id}}</td>
<td >{{el.name}}</td>
<td>{{el.sex}}</td>
<td >{{el.age}}</td>
<td >{{el.role}}</td>
</tr>
</tbody>
</table>
</body>
<script th:src="@{/js/jquery-2.1.1.min.js}"></script>
<script th:src="@{/js/avalon.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/myscript.js}"></script>
</html>

js文件

/** * Created by Intellij IDEA. * @Author LUOLIANG * @Date 2016/8/2 * @Comment js文件，用于页面发送ajax请求 */

//定义一个avalonjs的控制器
var viewmodel = avalon.define({
//id必须和页面上定义的ms-controller名字相同，否则无法控制页面
$id: "viewmodel",
datalist: {},
text: "请求数据",

request: function () {
$.ajax({
type: "post",
url: "/hello/data",    //向springboot请求数据的url
data: {},
success: function (data) {
$('button').removeClass("btn-primary").addClass("btn-success").attr('disabled', true);

viewmodel.datalist = data;

viewmodel.text = "数据请求成功，已渲染";
}
});
}
});

3. 运行

springboot的运行也非常简单，可以使用maven插件，如下图。



也可以直接运行main方法。

项目跑起来后，浏览器访问http://localhost:8080/hello/index即可看到效果如下。
ps：springboot默认的端口是8080，可以在yml配置文件中修改。



点击按钮，会通过ajax异步请求数据并且更新列表。如下图：



至此，一个简单的springboot+ajax的例子就写完了，有不对的地方，欢迎大神指出。