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>

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

原文地址:https://www.cnblogs.com/zys2019/p/13785000.html