我来详细讲解一下SpringBoot实现前后端、json数据交互以及Controller接收参数的几种常用方式的攻略。
前后端交互的几种方式：
- 后端通过模板引擎渲染，前端通过表单提交或a标签跳转来传递数据。
- 前后端分离，后端通过RESTful API提供数据，前端通过ajax请求来获取数据。
- 前后端分离，后端通过GraphQL提供数据，前端通过GraphQL来获取数据。
Controller接收参数的几种常用方式：
- 通过@RequestParam注解来接收参数，例如：
@PostMapping("/user")
public String addUser(@RequestParam("name") String name, @RequestParam("age") int age) {
// do something
}
- 通过@PathVariable注解来接收路径变量，例如：
@GetMapping("/user/{id}")
public String getUserById(@PathVariable("id") int id) {
// do something
}
- 通过@RequestBody注解来接收请求体中的JSON数据，例如：
@PostMapping("/user")
public String addUser(@RequestBody User user) {
// do something with user object
}
下面我将通过两个示例来详细介绍如何实现前后端、json数据交互以及Controller接收参数的几种常用方式。
示例一：后端通过模板引擎渲染，前端通过表单提交来传递数据
后端代码
首先我们要在pom.xml文件中添加依赖：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
然后我们创建一个UserController，其中包含两个方法：addUser和listUsers。
@Controller
public class UserController {
private List<User> userList = new ArrayList<>();
@PostMapping("/user")
public String addUser(@RequestParam("name") String name, @RequestParam("age") int age) {
User user = new User(name, age);
userList.add(user);
return "redirect:/";
}
@GetMapping("/")
public String listUsers(Model model) {
model.addAttribute("users", userList);
return "userList";
}
}
前端代码
在templates文件夹下创建一个userList.html文件，这个文件是我们通过Thymeleaf动态生成的。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>User List</title>
</head>
<body>
<h1>User List</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr th:each="user : ${users}">
<td th:text="${user.name}"></td>
<td th:text="${user.age}"></td>
</tr>
</table>
<form method="post" action="/user">
<label for="name">Name:</label>
<input type="text" name="name"/><br>
<label for="age">Age:</label>
<input type="number" name="age"/><br>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
示例二：前后端分离，后端通过RESTful API提供数据，前端通过ajax请求来获取数据
后端代码
首先我们要在pom.xml文件中添加依赖：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
然后我们创建一个UserController，其中包含两个方法：addUser和listUsers。
@RestController
public class UserController {
private List<User> userList = new ArrayList<>();
@PostMapping("/user")
public User addUser(@RequestBody User user) {
userList.add(user);
return user;
}
@GetMapping("/users")
public List<User> listUsers() {
return userList;
}
}
前端代码
在页面上引入jQuery库，然后使用ajax请求来向后端获取数据。
<!DOCTYPE html>
<html>
<head>
<title>User List</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1>User List</h1>
<table border="1" id="userTable">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</table>
<form>
<label for="name">Name:</label>
<input type="text" id="name"/><br>
<label for="age">Age:</label>
<input type="number" id="age"/><br>
<button id="submitButton">Submit</button>
</form>
<script>
$(document).ready(function() {
// 获取用户列表
$.ajax({
url: "/users",
type: "get",
dataType: "json",
success: function(data) {
$.each(data, function(index, user) {
$('#userTable').append("<tr><td>" + user.name + "</td><td>" + user.age + "</td></tr>");
});
}
});
// 添加用户
$('#submitButton').click(function(e) {
e.preventDefault();
var name = $('#name').val();
var age = $('#age').val();
var user = {name: name, age: age};
$.ajax({
url: "/user",
type: "post",
data: JSON.stringify(user),
contentType: "application/json",
dataType: "json",
success: function(data) {
$('#userTable').append("<tr><td>" + data.name + "</td><td>" + data.age + "</td></tr>");
}
});
$('#name').val('');
$('#age').val('');
});
});
</script>
</body>
</html>
以上就是SpringBoot实现前后端、json数据交互以及Controller接收参数的几种常用方式的攻略了。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：SpringBoot实现前后端、json数据交互以及Controller接收参数的几种常用方式 - Python技术站
微信扫一扫 
支付宝扫一扫 