前端请求 Ajax / Axios

Axios----Get 请求

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            admin: null,
            password: null
        },
        methods: {
            send: function () {
                var json = {admin: 'wwwwww', password: 'ssss'};  //json对象
                var _this = this;
                axios({
                     url:"/register",
                     method:"GET",
                     params :json    //直接传入json对象

                 })
                // axios.get("/register", {params:json})   //另一种形式
                    .then(function (res) {  //返回数据处理

                        _this.admin = res; //直接用this.admin不行,要外部重新指定
                        console.log(res);
                        alert(res)
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            }
        }
    })
</script>
后端------
    @RequestMapping(value = "/register")
    public String register(String admin, String password) {
        System.out.println("接受到的admin===" + admin);
        System.out.println("接受到的password===" + password);
       return "{id:123}";
    }

---

Axios----Post请求

<script>

    var vm = new Vue({
        el: "#app",
        data: {
            admin: null,
            password: null
        },
        methods: {
            send: function () {
                var json = {admin: this.admin, password: this.password};
                var _this = this;
                axios({
                    url: "/register",
                    method: "POST",
                    data: json        //直接传入json对象,不用手动解析,axios默认自动解析成json字符串
                })
                // axios.post("/register", json)   //另一种形式
                    .then(response => (             //处理返回数据
                        this.admin = response
                    ))
                    // .then(function (res) {  //处理返回数据另一种形式
                    //
                    //     _this.admin = res;   //直接用this.admin不行,要外部重新指定
                    //     console.log(res);
                    //     alert(res)
                    // })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            }
        }
    })
</script>

后端获取-------------
    @RequestMapping(value = "/register")
        public String register(@RequestBody User user) {  //注意需要@RequestBody注解(因为前端传来的是json字符串)
        System.out.println("接受到的admin11===" + user.getAdmin());
        System.out.println("接受到的password11===" + user.getPassword());
        return "{id:123}";
    }

---

Ajax----Get 请求

<script>
        var json = {'admin': '的撒的撒', 'password': '大萨达所'};  //json对象
        var parseJson = JSON.stringify(json);    //json 对象解析成 json字符串

        $.ajax({
            url: "/register",
            async: true,
            data: json,  //直接使用json对象传输
          
            success: function (data) {
                alert(data)
            },
            error: function () {
                alert("请求错误,请重新输入");
            },
            type: "GET"
        });
</script>

后端------
    @RequestMapping(value = "/register")
    public String register(String admin, String password) {  //或者 User user
        System.out.println("接受到的admin===" + admin);
        System.out.println("接受到的password===" + password);
       return "{id:123}";
    }

Ajax----Post请求

<script>
        var json = {'admin': '的撒的撒', 'password': '大萨达所'};  //json对象
        var parseJson = JSON.stringify(json);    //json 对象解析成 json字符串

        //Ajax不明确Context-type  后端不用加@requestbody
        $.ajax({
            url: "/register",
            async: true,
            data: json,  //直接使用json对象传输
          
            success: function (data) {
                alert(data)
            },
            error: function () {
                alert("请求错误,请重新输入");
            },
            type: "POST"
        });


       //Ajax明确Context-type  后端需要@requestbody
        $.ajax({
            url: "/register",
            async: true,
            data: parseJson ,  //使用json字符串
            
            contentType: "application/json; charset=utf-8",  //明确类型
            
            success: function (data) {
                alert(data)
            },
            error: function () {
                alert("请求错误,请重新输入");
            },
            type: "POST"
        });

</script>

后端获取-------------
    @RequestMapping(value = "/register")
        public String register(@RequestBody User user) { //使用对象接收  根据情况是否添加@RequestBody 
        System.out.println("接受到的admin11===" + user.getAdmin());
        System.out.println("接受到的password11===" + user.getPassword());
        return "{id:123}";
    }

如果前端传来的是json对象,则最直接使用 User user 来接收
如果前端传来的是json字符串,则使用@RequestBody User user 来接收