JQuery下的ajax的使用

最新推荐文章于 2023-01-23 18:28:10 发布

chengzhangdewo

最新推荐文章于 2023-01-23 18:28:10 发布

阅读量77

点赞数

文章标签： ajax jquery

本文链接：https://blog.csdn.net/chengzhangdewo/article/details/120511649

版权

jquery封装的ajax

1.后台接口的请求方式get/post

2.后台接口的路径 url

3.请求的参数数据格式

4.请求头的设置

5.响应数据的获取

静态方法，需要$去调用
$.ajax({//配置对象})
设置全局变量 token认证
            $.ajaxSetup({
                headers:{
                    'Authorization':sessionStorage.getItem('token')
                }
            })
})配置全局变量
$.ajax({
    //请求的路径
    url:"47.93.206.13:7788",
    //请求的方式
    method:'get',
    //请求携带的数据
    data:{},
    请求头的设置
    headers:{
       'Content-Type':'application/json',
       'token','xxx'
    },
    //请求成功的回调函数
    success:function(res){
        //res就是后台响应的数据
    }
	//请求失败的回调函数
	error:function(err){
        //err就是后台响应的错误数据
    }
    
})

下面是实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        $(function () {
            $.ajaxSetup({
                headers: {
                    'Authorization': sessionStorage.getItem('token')
                }
            })


            let obj = {
                username: "admin2",
                password: 123321
            }
            $('button').on('click', function () {

                $.ajax({
                    // 请求路径
                    url: "http://47.93.206.13:8888/user/login",
                    //请求方式
                    method: 'post',
                    // 请求携带参数
                    data: JSON.stringify(obj),
                    // 请求头的设置
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    // 成功回调
                    success: function (res) {
                        console.log(res);
                        sessionStorage.setItem('token', res.data.token);
                        // $.ajaxSetup({
                        //     headers: {
                        //         'Authorization': sessionStorage.getItem('token')
                        //     }
                        // })
                    },
                    error: function (err) {
                        console.log(err)
                    }
                })
            })
            //给加载按钮绑定事件
            $('#load').click(function () {
                $.ajax({
                    url: 'http://47.93.206.13:8888/baseUser/cascadeRoleFindAll',
                    method: 'get',
                    success: function (res) {
                        console.log(res)
                    },
                    error: function (err) {
                        console.log(err)
                    }
                })
            })

        })
    </script>
</head>

<body>
    <button>登陆</button>
    <button id="load">加载数据</button>
</body>

</html>

chengzhangdewo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery下的ajax的使用

jquery封装的ajax1.后台接口的请求方式get/post2.后台接口的路径url3.请求的参数数据格式4.请求头的设置5.响应数据的获取静态方法，需要$去调用$.ajax({//配置对象})设置全局变量 token认证 $.ajaxSetup({ headers:{ 'Authorization':sessionStorage.getItem('...
复制链接

扫一扫