jQuery方式的AJAX
<script>
// get
//第一个参数是地址url,第二个参数是数据data,第三个参数是返回结果函数
$('button').eq(0).click(function(){
$.get('http://localhost:8000/jquery-server',{a:100,b:200},function(response){
console.log(response);
},'json');
});
// <!-- post -->
//第一个参数是地址url,第二个参数是数据data,第三个参数是返回结果函数
$('button').eq(1).click(function(){
$.post('http://localhost:8000/jquery-server',{a:100,b:200},function(response){
console.log(response);
});
});
// ajax
$('button').eq(2).click(function(){
//url、data、type、dataType、success、error、headers
$.ajax({
url:'http://localhost:8000/delay',
data:{a:100,b:200},
type:'get',
dataType:'json',
success:function(res){
console.log(res);
},
timeout:2000,
error:function(){
console.log('出错了!!');
},
headers:{
c:300,
d:400
}
});
});
</script>
axios方式的AJAX
<script>
const buttons = document.querySelectorAll('button');
//配置 baseURL
axios.defaults.baseURL = 'http://localhost:8000';
buttons[0].onclick = function () {
//get请求
axios.get('/axios-server', {
//url参数
params: {
id: 100,
vip: 7
},
//请求头信息
headers: {
name: 'atguigu',
age: 20
}
}).then(value => {
console.log(value);
});
};
buttons[1].onclick = function () {
//get请求
axios.get('/axios-server', {
username: 'admin',
password: 'admin'
}, {
//url参数
params: {
id: 100,
vip: 7
},
//请求头信息
headers: {
name: 'atguigu',
age: 20
}
}).then(value => {
console.log(value);
});
};
buttons[2].onclick = function () {
//get请求
axios({
//请求方法
method:'post',
//url
url:'/axios-server',
//url参数
params:{
vip:10,
level:30
},
//头信息
header:{
a:100,
b:200
},
//请求体参数
data:{
username:'admin',
password:'admin'
}
}).then(res=>{
console.log(res);
console.log(res.statusText);
console.log(res.header);
console.log(res.data);
});
};
</script>