1.学会引入工具库 axios
2.结构 axios({
url:'根据接口文档',
method:'GET' (是获取),'POST'增加 ,'DELETE'删除
params:是get的对象参数 post delete是data
形参根据接口文档
}).then(res =>{
})
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<!-- 1.引入工具库 axios js工具 -->
</head>
<body>
<script>
axios({
// url:'http://ajax-api.itheima.net/api/province',
url:'http://hmajax.itheima.net/api/area',
method:'GET',
params: {
pname:'浙江省',
cname:'杭州市'
}
}).then(res => {
console.log(encodeURI(res));
console.log(decodeURI(res));
})
</script>
2.传参本质和url编码
encoudeURI和decodeURI
<script>
const str = '你是蔡徐坤'
console.log(encodeURI(str)); // 转换成乱码
console.log(decodeURI(str)); // 把乱码转换成中文
</script>
3.案例
<script>
axios({
url:'http://hmajax.itheima.net/api/news',
method:'GET'
}).then(res => {
console.log(res);
const arr = res.data.data
document.querySelector('#news-list').innerHTML = arr.map(item =>{
const {img, title, source,cmtcount} = item
return `
<div class="news-item">
<img class="thumb" src="${item.img}" alt="" />
<div class="right-box">
<!-- 新闻标题 -->
<h1 class="title">${item.title}</h1>
<div class="footer">
<div>
<!-- 新闻来源 -->
<span>${item.source}</span>
<!-- 发布日期 -->
<span>2019-10-28 10:14:38</span>
</div>
<!-- 评论数量 -->
<span>评论数:${item.cmtcount}</span>
</div></div>
</div>`
}).join('')
})
4.axios的增和查
<script>
// axios 新增数据 用method 'POST' 参数名:data
axios({
url:'http://hmajax.itheima.net/api/books',
method:'POST',
data:{
bookname:'钢铁如何炼成鸡的',
author: '蔡徐坤',
publisher: '北京出版社',
creater: '保尔'
}
}).then(res => {
console.log(res);
})
axios({
url:'http://hmajax.itheima.net/api/books',
method:'GET',
params:{
creater:'保尔'
}
}).then(res => {
console.log(res);
})
</script>
5.用户登录案例
<style>
html,
body {
background-color: #f8f8f8;
}
.login-box {
width: 400px;
position: fixed;
top: 20%;
left: 50%;
transform: translateX(-50%);
border: 1px solid #efefef;
padding: 20px;
border-radius: 4px;
box-shadow: 1px 1px 5px #cfcfcf;
background-color: #fff;
transition: box-shadow 0.3s ease;
}
.login-box:hover {
transition: box-shadow 0.3s ease;
box-shadow: 1px 1px 20px #cfcfcf;
}
</style>
</head>
<body>
<div class="login-box">
<div class="form-group">
<label for="username">Account</label>
<!-- 账号 -->
<input type="text" class="form-control" id="username" autocomplete="off">
<small id="emailHelp" class="form-text text-muted">
The available account is<strong>admin</strong>
</small>
</div>
<div class="form-group">
<!-- 密码 -->
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
<small id="emailHelp" class="form-text text-muted">The available password is
<strong>123456</strong></small>
</div>
<button type="submit" class="btn btn-primary" id="btnLogin">Submit</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script>
const btn = document.querySelector('#btnLogin')
btn.addEventListener('click',() => {
const username = document.querySelector('#username').value.trim()
const password = document.querySelector('#password').value.trim()
axios({