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/[email protected]/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处理

有两种接收方式:

  1. JSONObject
  2. 自定义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请求url为 /user/json
ajax请求url为 /user/dto

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

标签云

ajax AOP Bootstrap cdn Chevereto CSS Docker Editormd Hexo IDEA IPA JavaScript jsDeliver JS樱花特效 Linux markdown Maven MyBatis MyBatis-plus MySQL Navicat Oracle Pictures QQ Sakura SEO shadowrocket Spring Boot SpringMVC SSR Thymeleaf V2ray Vue Web WebSocket Wechat Social WordPress Yoast SEO 代理 分页 图床 小幸运 苹果iOS国外账号 苹果IOS账号 通信原理

本文最后更新于2020年3月24日,已超过 2 个月没更新!