ajax复习第二弹

1、jquery&ajax
利用jquery带带ajax对象方法，传入参数为对象，对象内属性包含
url：外部资源地址
data：传入到服务器参数
type：请求类型
dataType：返回的数据都类型
success，请求成功，数据返回完全后的回调函数
error，请求失败后的回调函数
timeout，超时时间
header 请求头

$.ajax({
    //访问服务器地址
    url:'http://127.0.0.1:8000/jquery-server',
    //传入到服务器的参数
    data:{a:100,b:200},
    //请求类型
    type:'GET',
    //响应体结果设置,大小写错误可能会导致输出错误
    dataType:'json',
    //成功的回调
    success:function(data){
        console.log(data);
    },
    //超时时间,当请求2s内没有回应的话，就直接取消
    timeout:2000,
    //失败的回调
    error:function(){
        console.log('出错了！')
    },
    //头部信息设置，自定义要在服务器端进行设置
    header:{
        c:300,
        d:400,
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

直接利用get方法，或者post方法，进行请求。
第一个参数为，外部访问地址，第二个为传入服务端参数，第三个为成功回调函数，第四个为返回数据类型。

$.get('http://127.0.0.1:8000/jquery-server’,
    {a:100,b:200},
    function(data){
        console.log(data);
    },
    'json’);

$.post('http://127.0.0.1:8000/jquery-server’,
    {a:100,b:200},
    function(data){
        console.log(data);
    });
1
2
3
4
5
6
7
8
9
10
11
12

2、fetch方法&ajax
第一个url为，外部资源地址
第二个为存放访问属性的对象
跟在后面的then方法是处理返回数据的函数。

fetch('http://127.0.0.1:8000/fetch-server?vip=10',{
    //请求方法
    method:'POST',
    //请求头
    headers:{
        name:'lxw',
    },
    //请求体
    body:'username=admin&password=admin’;
    }).then(
        function(value){
            console.log(value);
            //字符串
            /* return value.text(); */
            //json格式
            return value.json()
    }).then(response=>{
        console.log(response);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3、axios&ajax
在axios中有一个配置默认url前缀的属性

axios.defaults.baseURL = 'http://127.0.0.1:8000’;
1

这个属性配置完之后，下次再用就不需要再写这些前缀。

在axios中，请求方法和url可以独立起来写在最前面，其他的根别的类似，写在后面就行。
后面这个then就是处理返回数据的函数。

axios({
    //请求方法
    method:'POST',
    //url
    url:'/axios-server',

    //url参数
    params:{
        vip:10,
        level:30
    },
    //头信息
    headers:{
        a:100,
        b:200
    },
    //请求体参数
    data:{
        username:'admin',
        password:'admin'
    }
    }).then(response=>{
            console.log(response);
            //响应状态码
            console.log(response.status);
            //响应状态字符串
            console.log(response.statusText);
            //响应头
            console.log(response.headers);
            //响应体
            console.log(response.data);
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

跟jquery一样，它也可以直接用get和post方法。

//get 请求
axios.get('/axios-server',{
    //参数，url参数
    params:{
        id:100,
        vip:7
    },
    //请求头信息
    headers:{
        name:'atguigu',
        age:25
    }
    }).then(value => {
        console.log(value);
    })
}


axios.post('/axios-server',{
    //请求体    
    username:'admin',
    password:'admin'
    },{
    //参数，url参数
    params:{
        id:200,
        vip:9
    },
    //请求头信息
    headers:{
        name:'atguigu',
        age:25
    }
}).then(value => {
    console.log(value);
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

Post拥有请求体，所以它跟get的区别在于，post的第二个参数必须为请求体。