前端請求 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 來接收