Ajax的基本用法

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>

封装后，直接引入，然后调用对应的方法，是不是简洁很多了呢？