Spring Boot ajax提交数据后端接收并处理

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;
    }
}

1：前端Ajax提交请求

html

jquery 提交ajax请求

后台Controller处理

UserDTO

运行效果

前端输入信息

后端接收并打印

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

标签云

Comments | NOTHING

取消回复