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,
}
})
直接利用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);
});
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);
})
3、axios&ajax
在axios中有一个配置默认url前缀的属性
axios.defaults.baseURL = 'http://127.0.0.1:8000’;
这个属性配置完之后,下次再用就不需要再写这些前缀。
在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);
})
}
跟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);
})
}
Post拥有请求体,所以它跟get的区别在于,post的第二个参数必须为请求体。