1.介紹

2.基本用法

2.1原生寫法

        $.ajax({
            url: url,
            //是否是非同步請求，預設是
            // async: false,
            //請求方式，預設是get
            //type:'get',
            //資料請求的型別，預設是application/x-www-form-urlencoded，如果設定為application/json; charset=utf-8，則需要把引數轉為json字串
            // contentType: "application/json; charset=utf-8",
            
 
//傳遞的引數
            data: {},
            //成功的回撥
            success(data) {
                console.log(data)
            },
            //失敗的回撥
            error() {
                console.log("請求資料失敗")
            }
        })

1）get請求測試

    $.ajax({
            url: "https://autumnfish.cn/api/joke/list"
 
,
            data: {
                num: 5
            },
            //成功的回撥
            success(data) {
                console.log(data)
            },
            //失敗的回撥
            error() {
                console.log("請求資料失敗")
            }
        })

2）post請求測試

     $.ajax({
            url: 
 
"https://autumnfish.cn/api/user/reg",
            type:'post',
            contentType: "application/json; charset=utf-8",
            data:JSON.stringify({
                username:123456
            }),
            //成功的回撥
            success(data) {
                console.log(data)
            },
            //失敗的回撥
            error() {
                console.log("請求資料失敗")
            }
        })

這裡指定了請求的資料型別，然後把請求的引數轉為json字串，後臺需要使用@RequestBody接收。

2.2get的簡寫方式

$.get("https://autumnfish.cn/api/joke/list",{num: 5},function(data){
     console.log(data)
})

2.3post的簡寫方式

$.post("http://localhost:8001/test",{username: 123456},function(data){
    console.log(data)
})

這種方式，傳遞給後臺後，必須使用String username來接收，如果要用@RequestBody接收，那就只能使用$.ajax。具體參考下面的說明。

3.post請求前後臺傳值/接收問題

3.1預設方式

預設情況下，contentType值是"application/x-www-form-urlencoded"

$.ajax({
            url: "http://localhost:8001/test1",
            type: 'post',
            data: {
                name:'張三',
                age:20
            },
            //成功的回撥
            success(data) {
                console.log(data)
            },
            //失敗的回撥
            error() {
                console.log("請求資料失敗")
            }
})

傳遞引數後，後臺直接根據引數進行接收即可，在引數前面加@RequestParam也可以。

 @PostMapping("/test1")
 public void test(String name,Integer age){
        System.out.println(name+","+age);
  }

3.2修改contentType

如果後臺需要通過@RequestBody接收，那麼使用預設的方式是不行的，需要修改contentType的值是"application/json;charset=utf-8"，另外在傳遞時引數要轉為json字串。

 $.ajax({
            url: "http://localhost:8001/test2",
            type: 'post',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                name:'張三',
                age:20
            }),
            //成功的回撥
            success(data) {
                console.log(data)
            },
            //失敗的回撥
            error() {
                console.log("請求資料失敗")
            }
})

後臺接收

 @PostMapping("/test2")
 public void test2(@RequestBody User user){
        System.out.println(user);
  }

4.封裝ajax

對於傳遞json字串型別的，每次傳遞的非常麻煩，可以對這些方法進一步封裝，檔名是request.js，內容如下：

//對ajax的封裝

//get請求
function get(url, data, callback, async = true) {
    $.ajax({
        url,
        async,
        type: 'get',
        data,
        //成功的回撥
        success(res) {
            callback(res)
        },
        //失敗的回撥
        error() {
            console.log("傳送請求時出現錯誤！")
        }
    })
}
//post請求，預設方法
function post(url, data, callback, async = true) {
    $.ajax({
        url,
        async,
        type: 'post',
        data,
        //成功的回撥
        success(res) {
            callback(res)
        },
        //失敗的回撥
        error() {
            console.log("傳送請求時出現錯誤！")
        }
    })
}
//post請求，傳遞json字串，後臺使用@RequestBody接收
function postJson(url, data, callback, async = true) {
    $.ajax({
        url,
        async,
        type: 'post',
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(data),
        //成功的回撥
        success(res) {
            callback(res)
        },
        //失敗的回撥
        error() {
            console.log("傳送請求時出現錯誤！")
        }
    })
}

在html中引入並使用。注意，必須先引入jquery，再引入request

<script src="jquery.min.js"></script>
<script src="reuqest.js"></script>

 <script>
        get("https://autumnfish.cn/api/joke/list",{num: 5},function(data){
            console.log(data)
        })

        postJson("https://autumnfish.cn/api/user/reg",{username: 123456},function(data){
            console.log(data)
        })
 </script>

封裝後，直接引入，然後呼叫對應的方法，是不是簡潔很多了呢？