Spring Boot ajax提交数据后端接收并处理 -现在很多前后端数据交互都是ajax提交数据,后端处理再给前端返回数据。下面给大家分享一下我在学习过程中关于Ajax 发送JSON 请求,后端处理的一些方法。一方面当作学习笔记,另一方面希望能给更多新手提供参考。
1:前端Ajax提交请求
html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8">
<title>Spring Boot ajax提交数据并接收</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="email" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
</form>
<button class="btn btn-default" onclick="submit()">提交</button>
</div>
<div class="col-md-3"></div>
</div>
</body>
</html>
jquery 提交ajax请求
<script>
function submit(){
var username = $("#username").val();
var password = $("#password").val();
var list ={
username: username,
password: password
};
$.ajax({
//请求方式
type: "POST",
//请求的媒体类型
contentType: "application/json;charset=UTF-8",
//请求地址
url: "/user/json",
//数据,json字符串
data: JSON.stringify(list),
//请求成功
success: function (res) {
if (res.status === 200) {
console.log(res);
} else {
}
}
});
}
</script>
后台Controller处理
有两种接收方式:
- JSONObject
- 自定义DTO (Data Transfer Object)
@Controller
public class IndexController {
@RequestMapping("/")
public String index(){
return "login.html";
}
@PostMapping("/user/json")
@ResponseBody
public JSONObject user(@RequestBody JSONObject user){
String username = user.get("username").toString();
String password = user.get("password").toString();
System.out.println("使用JSONObject接收:");
System.out.println("用户名:"+username);
System.out.println("密码:"+password);
JSONObject result = new JSONObject();
result.put("status",200);
result.put("message","服务端已经收到请求");
return result;
}
@PostMapping("/user/dto")
@ResponseBody
public JSONObject user(@RequestBody UserDTO user){
String username = user.getUsername();
String password = user.getPassword();
System.out.println("使用自定义的DTO接收:");
System.out.println("用户名:"+username);
System.out.println("密码:"+password);
JSONObject result = new JSONObject();
result.put("status",200);
result.put("message","服务端已经收到请求");
return result;
}
}
UserDTO
public class UserDTO {
private String username;
private String password;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
运行效果
前端输入信息

后端接收并打印


浏览器控制台查看返回的信息

标签云
ajax AOP Bootstrap cdn Chevereto CSS Docker Editormd GC Hexo IDEA IPA JavaScript jsDeliver JS樱花特效 JVM Linux markdown Maven MyBatis MyBatis-plus MySQL Pictures Sakura SEO shadowrocket Spring Boot Spring Cloud Spring Cloud Alibaba SpringMVC SSR Thymeleaf V2ray Vue Web WebSocket Wechat Social WordPress Yoast SEO 代理 分页 图床 小幸运 苹果iOS国外账号 苹果IOS账号
Comments | NOTHING