1、axios体验
<body>
<button>按钮</button>
<!-- 要想使用 axois,必须先导入 -->
<script src="./lib/axios.js"></script>
<script>
// 点击按钮,发送ajax
let button = document.querySelector('button');
button.addEventListener('click',function(){
// 发送ajax - 要配置很多参数,所以参数是对象类型
axios({
method:'get',
url:'http://www.liulongbin.top:3009/api/getbooks'
}).then(res=>{
// res里面有六个属性,未来几乎只用data属性
console.log(res.data);
});
});
//
</script>
</body>
2、get请求携带参数
<body>
<script src="./lib/axios.js"></script>
<script>
// 发送请求,接收数据
axios({
method:'get',
url:'http://www.liulongbin.top:3009/api/getbooks',
// get请求可以传递 查询(query)参数,axios通过 params属性传递
params:{
id:2,
bookname:'红楼梦'
}
}).then(res => {
console.log(res.data);
})
</script>
</body>
查询参数的本质,就是把参数写到路径的最末尾! 用 ? 分割;
参数要求: 属性与值之间用 = 链接,多个属性之间用 & 链接; 路径中字符串不能带引号;
axios({
method:'get',
url:'http://www.liulongbin.top:3009/api/getbooks?id=2¶ms=红楼梦',
}).then(res => {
console.log(res.data);
})
3、编码和解码
<script>
// 网络传输中只允许传递 ASCII 码表中的数据,所以特殊符号和中文需要编码和解码
// 1.编码 - encodeURICompoment
let str1 = encodeURIComponent('百年孤独')
console.log(str1);
// 2.解码 - 三个%的编码代表一个汉字
let str2 = decodeURIComponent('%E5%9D%A4')
console.log(str2);
</script>
4、post请求
<body>
<script src="./lib/axios.js"></script>
<script>
// post请求都是需要携带参数的,通过 data 属性传递参数
// axios发送post请求
axios({
method:'post',
url:'http://www.liulongbin.top:3009/api/addbook',
data:{
bookname:'黑道风云三十年',
author:'赵红兵',
publisher:'黑龙江出版社'
}
}).then(({data:res}) => {
console.log(res);
});
</script>
</body>
5、form标签的三个属性
form 标签有三个属性:
action="" 页面跳转: 相当于axios中的url (不写默认跳到当前页面)
method="" 请求方式: 相当于axios中的method (不写默认get)
entype="" 参数类型: 相当于axios中的请求头中的 content-type(设置请求体参数)
6、阻止表单默认提交
// 给form表单绑定submit提交事件,并阻止表单默认提交
const form = document.querySelector('form');
// 绑定提交事件
form.addEventListener('submit',function(e){
// 阻止事件的默认行为
e.preventDefault()
})
7、axios的全局配置与简写
<body>
<script src="./lib/axios.js"></script>
<script>
// axios中有一个全局配置,可以设置所有ajax的基础路径,但是只有配置之后才生效
axios.defaults.baseURL = 'http://www.liulongbin.top:3009';
// 1.简写get
axios.get('/api/getbooks').then(({data:res}) =>{
console.log(res);
})
// 2.简写post
axios.post('/api/getbooks').then(({data:res}) =>{
console.log(res);
})
// 3.完整写法
axios({
method:'get',
url:'/api/getbooks'
}).then(({data:res})=>{
console.log(res);
})
</script>
</body>
