ajax的基本使用
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button">点击发送请求</button>
<div id="result">
</div>
</body>
<script type="text/javascript">
const btn=document.getElementsByTagName('button')[0];
btn.onclick=()=>{
//创建对象
const xhr=new XMLHttpRequest();
//初始化 设置请求方法和url
xhr.open('GET','http:127.0.0.1:8000/');
//发送请求
xhr.send();
//处理服务器返回的结果
xhr.onreadystatechange=()=>{
//判断（服务器返回了所有结果）
if(xhr.readyState===4){
//判断响应状态码200 404 403 401 500
//2xx 成功
if(xhr.status>=200&&xhr.status<=300){
console.log(xhr.status);//状态码
console.log(xhr.statusText);//状态字符串
console.log(xhr.getAllResponseHeaders());//所有响应头
console.log(xhr.responseText);//响应体
}
}
}
}
</script>
</html>
axios
导入axios（也可以从官网下载然后本地导入）
<script src="https://unpkg.com/axios/dist/axios.js"></script>
axios的get方法传参(delete方法与之类似)
<script type="text/javascript">
//设置基准路径
axios.defaults.baseURI='http://localhost:8000/'
//url地址传参 通过在地址后面加？属性名=值的方式
axios.get('serve?id=90')
.then((res) => console.log(res.data))
//params 传参
axios.get('serve',{
params:{
id:789
}
})
.then((res) => console.log(res.data))
//服务器里应该用req.query.id 拿到
/*
app.get('/serve',(req,res)=>{
res.setHeader('Access-Control-Allow-Origin', '*');
res.send('axios get 传参形式'+req.query.id)
}
*/
});
</script>
axios的post方法传参(put方法与之类似)
axios.post('http://127.0.0.1/serve',{
uname:'ysx',
pwd:123456
})
.then((res) => console.log(res.data))
//服务器里应该用req.body.uname拿到
/*
app.post('/serve',(req,res)=>{
res.setHeader('Access-Control-Allow-Origin', '*');
res.send('axios post 传参形式'+req.body.uname + req.body.pwd)
});
*/
2748
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
