查询
<script src="./lib/axios.js"></script>
<script>
// 请求地址 http://www.itcbc.com:3006/api/getbooks
// 请求方式 GET
// 请求参数 可以不传
axios({
// 请求地址
url: 'http://www.itcbc.com:3006/api/getbooks',
// 请求方式
method: 'GET',
// 请求参数 可以不传
}).then(function (result) {
// 我们的数据 响应回来了 .then 里面的函数就会触发 result 拥有了后台响应的数据
console.log(result.data.data);
});
</script>
ajax-把数据获取到前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>02-ajax-把数据获取到前端而已.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
table {
width: 80%;
margin: 100px auto;
border-collapse: collapse;
}
th,
td {
padding: 20px;
text-align: center;
color: #fff;
}
/* 奇数 */
tr:nth-child(odd) {
background-color: #000;
}
/* 偶数 */
tr:nth-child(even) {
background-color: #333;
}
</style>
</head>
<body>
<!--
显示 真实 的 图片列表信息 显示到 表格中
-->
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script src="./lib/axios.js"></script>
<script>
/*
请求的三大关键
1 地址 http://www.itcbc.com:3006/api/getbooks
2 方式 GET
3 参数 无
*/
axios({
url: 'http://www.itcbc.com:3006/api/getbooks',
method: 'GET',
}).then((result) => {
// console.log(result);
// 获取返回数据 数组
const arr = result.data.data;
// console.log(arr);
// map 将源数组 修改 返回成 新的数组
// join 数组转成字符串
const html = arr
.map(
(value) => `<tr>
<td>${value.id}</td>
<td>${value.bookname}</td>
<td>${value.author}</td>
<td>${value.publisher}</td>
</tr>`
)
.join('');
document.querySelector('tbody').innerHTML = html;
});
</script>
</body>
</html>
get请求
<script src="./lib/axios.js"></script>
<script>
/*
axios 发送get请求 携带参数 两种方式
1 直接在url上拼接 即可 演示
2 在params 对象中携带
请求的三大关键
1 请求的地址 http://www.itcbc.com:3006/api/getbooks
2 请求的方式 GET
3 请求的参数
1 bookname=红楼梦
*/
axios({
// 请求参数 英文的符号为分割
// ? 前面部分是正常的url
// ? 后面的参数部分 a=1&b=2
url: 'http://www.itcbc.com:3006/api/getbooks?bookname=斗破苍穹134&author=我自己',
method: 'GET',
}).then(result=>{
console.log(result);
})
</script>
get请求带参数
<script src="./lib/axios.js"></script>
<script>
/*
axios 发送get请求 携带参数 两种方式
1 直接在url上拼接 即可 演示
http://www.itcbc.com:3006/api/getbooks?bookname=斗破苍穹134&author=我自己
2 在params 对象中携带 本质 也是 帮我们将对象 转成了字符串 然后拼接在 url上
3 实际开发中 两种传递参数的方式 都常用的 哪种写代码方便就使用哪个！！！
*/
axios({
url: 'http://www.itcbc.com:3006/api/getbooks',
method: 'GET',
params: {
bookname: '斗破苍穹134',
author: '土豆',
},
}).then((result) => {
console.log(result);
});
</script>
快速增加数据
<script src="./lib/axios.js"></script>
<script>
for (let index = 0; index < 10; index++) {
axios({
url: 'http://www.itcbc.com:3006/api/addbook',
method: 'POST',
data: {
bookname: '演示' + index,
author: '我自己你不知道' + index,
publisher: '斑马出版社' + index,
// 改为只有自己知道的key 长度 6-20
appkey: 'bbccddaaa',
},
});
}
</script>
查询属于自己的数据
<script src="./lib/axios.js"></script>
<script>
/*
1 先写好 静态结构
2 一打开页面的时候 希望看见 完整的数据
1 发送一次请求 网络请求
没有携带 书名 参数
3 点击了按钮
1 获取输入框的值
2 拼接成 请求参数
3 发送一次新的 网络请求 有携带 书名 参数
4 优化
程序带不带参数 希望 传参来实现
*/
// 发送网络请求 获取数据 渲染页面
function render(bn) {
// bn 第一次调用render的时候 没有传参 bn = undefined
// bn 点击按钮的 bn 等于 输入框的值 "演示2"
let params = {
appkey: 'vasdfds3',
};
if (bn) {
// 你知道有哪些 数据 转成 布尔类型之后 是 false 吗
// 0 false "" undefined null NaN
// 不是 undefined
params.bookname = bn;
}
axios({
url: 'http://www.itcbc.com:3006/api/getbooks',
method: 'GET',
params: params,
}).then((result) => {
const arr = result.data.data;
const html = arr
.map(
(value) => `<tr>
<td>${value.id}</td>
<td>${value.bookname}</td>
<td>${value.author}</td>
<td>${value.publisher}</td>
</tr>`
)
.join('');
document.querySelector('tbody').innerHTML = html;
});
}
// 2 发送请求 获取数据渲染页面
render();
// 3 获取按钮
const input = document.querySelector('input');
const button = document.querySelector('button');
button.addEventListener('click', function () {
// 获取输入框值
const bookname = input.value;
render(bookname); // 把参数传递过去即可
});
</script>
post请求
<script src="./lib/axios.js"></script>
<script>
/*
post 新增数据
请求的三大关键
1 请求的地址 http://www.itcbc.com:3006/api/addbook
2 请求的方式 POST
3 请求的参数 data 来传递
*/
axios({
url:"http://www.itcbc.com:3006/api/addbook",
method:"POST",
data:{
bookname:"从入门到出去",
// bookname:"1",
author:"黑马77",
publisher:"白马",
appkey:"sdfr34343"
}
})
.then(result=>{
console.log(result);
})
</script>
添加书籍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>09-添加书籍.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.form {
margin: 100px auto;
width: 600px;
padding: 20px;
border: 1px solid #ccc;
}
input {
width: 100%;
height: 50px;
border-radius: 10px;
margin: 15px 0;
}
</style>
</head>
<body>
<div class="form">
<input id="bookname" type="text" placeholder="请输入书籍" />
<input id="author" type="text" placeholder="请输入作者" />
<input id="publisher" type="text" placeholder="请输入出版社" />
<input id="btn" type="button" value="新增" />
</div>
<script src="./lib/axios.js"></script>
<script>
/*
1 静态结构
2 给 “新增” 绑定点击事件
3 事件触发了
获取到一些数据 书籍名称、作者、出版社 appkey
把数据 写到 axios data属性 来完成 添加 数据功能
*/
const booknameDom = document.querySelector('#bookname');
const authorDom = document.querySelector('#author');
const publisherDom = document.querySelector('#publisher');
const btnDom = document.querySelector('#btn');
btnDom.addEventListener('click', function () {
const bookname = booknameDom.value;
const author = authorDom.value;
const publisher = publisherDom.value;
const appkey = 'vasdfds3';
// es6 简写的语法
const data = { bookname, author, publisher, appkey };
// 请求的地址 请求的方式 请求的参数
axios({
url: 'http://www.itcbc.com:3006/api/addbook',
method: 'POST',
data,
}).then((result) => {
console.log(result);
});
});
</script>
</body>
</html>
图书删除(弹出确认框)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>01-图书-删除</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
table {
width: 80%;
margin: 100px auto;
border-collapse: collapse;
}
th,
td {
padding: 20px;
text-align: center;
color: #fff;
}
/* 奇数 */
tr:nth-child(odd) {
background-color: #000;
}
/* 偶数 */
tr:nth-child(even) {
background-color: #333;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script src="./lib/axios.js"></script>
<script>
// 弹出确认框 用户点击
// 确定 confirm 会返回true
// 取消 confirm 会返回false
// if (confirm('您确认删除吗')) {
// console.log('要删除');
// } else {
// console.log('取消删除');
// }
/*
1 调整 静态结构 增加一列 删除
2 给删除按钮绑定点击事件 (异步的原因导致我们没有办法获取到dom元素 )
1 在确保有标签的情况下你再去获取 dom元素 不够优雅
2 事件委托！！ 。。
1 找一个 删除按钮的父元素（一直存在网页中 不是动态生成）
3 点击事件触发了
1 先弹出一个确认框 来询问用户 您是否确定删除
confirm 确认框 alert 提示信息
if (confirm('您确认删除吗'))
2 删除数据（通过某种方式 来告诉服务器 服务器删除数据） - 和服务器通信 ajax 5种方式 get post delete put patch
1 请求方式 delete
2 请求地址 http://www.itcbc.com:3006/api/delbook
3 请求的参数
id
appkey
*/
// ajax 异步
// 当我们开始调用 axios 只是表示 发送了一个网络请求 不表示 数据马上响应回来
// 也不表示页面马上就会有数据
axios({
url: 'http://www.itcbc.com:3006/api/getbooks',
method: 'GET',
params: {
appkey: 'bbccddaaa',
},
}).then((result) => {
const arr = result.data.data;
const html = arr
.map(
(value) => `<tr>
<td>${value.id}</td>
<td>${value.bookname}</td>
<td>${value.author}</td>
<td>${value.publisher}</td>
<td><button class="delete-btn" >删除</button></td>
</tr>`
)
.join('');
document.querySelector('tbody').innerHTML = html; // 网页中 肯定有标签
});
// 2 获取 删除按钮的 父元素 tbody
const tbody = document.querySelector('tbody');
tbody.addEventListener('click', function (event) {
// 判断你当前点击的 dom元素 是不是我们想要删除按钮
if (event.target.className === 'delete-btn') {
// 判断 用户 点击 删除还是取消
if (confirm('您确定删除吗')) {
console.log('要删除');
} else {
console.log('取消删除');
}
}
});
</script>
</body>
</html>
图书编辑完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>02-图书-编辑</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
table {
width: 80%;
margin: 100px auto;
border-collapse: collapse;
}
th,
td {
padding: 20px;
text-align: center;
color: #fff;
}
/* 奇数 */
tr:nth-child(odd) {
background-color: #000;
}
/* 偶数 */
tr:nth-child(even) {
background-color: #333;
}
.main {
height: 100vh;
display: flex;
}
.left {
flex: 2;
}
.right {
flex: 1;
background-color: sandybrown;
}
.form {
border: 1px solid #ccc;
width: 80%;
margin: 100px auto;
padding: 20px;
}
.form input {
width: 100%;
height: 50px;
margin: 15px 0;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="right">
<div class="form">
<input id="bookname" type="text" placeholder="请输入书名" />
<input id="author" type="text" placeholder="请输入作者" />
<input id="publisher" type="text" placeholder="请输入出版社" />
<input id="btn" type="button" value="确认编辑" />
</div>
</div>
</div>
<script src="./lib/axios.js"></script>
<script>
/*
1 点击编辑按钮 获取到 被点击的按钮 对应的数据 将他们显示到 表单中
被点击的按钮 对应的数据 ？？？
1 前端自己去获取标签中的数据 将他们显示到 新表单中 不建议
2 通用的做法
1 获取到待编辑的数据的 id 根据id 再去发送一个网络请求 返回对应的数据
const obj={
bookname,id,author,publisher
}
obj.bookname
2 获取到被编辑的按钮的 数据 的id 获取对应的数据
*/
function render() {
axios({
url: 'http://www.itcbc.com:3006/api/getbooks',
method: 'GET',
params: {
appkey: 'bbccddaaa',
},
}).then((result) => {
const arr = result.data.data;
const html = arr
.map(
(value) => `<tr>
<td>${value.id}</td>
<td>${value.bookname}</td>
<td>${value.author}</td>
<td>${value.publisher}</td>
<td><button class="update-btn" data-id="${value.id}" >编辑</button></td>
</tr>`
)
.join('');
document.querySelector('tbody').innerHTML = html;
});
}
render();
const bookname = document.querySelector('#bookname');
const author = document.querySelector('#author');
const publisher = document.querySelector('#publisher');
const btn = document.querySelector('#btn');
// 2 获取编辑按钮 事件委托
const tbody = document.querySelector('tbody');
let id;
tbody.addEventListener('click', function (event) {
// 判断当前点击的是不是编辑按钮
if (event.target.className === 'update-btn') {
// 来获取到 被点击的 那一些数据
// const id=event.target.dataset.id;
id = event.target.dataset.id;
// axios get请求 图片数据
axios({
url: 'http://www.itcbc.com:3006/api/getbooks',
method: 'GET',
params: {
id,
appkey: 'bbccddaaa',
},
}).then((result) => {
// console.log(result);
const obj = result.data.data[0];
bookname.value = obj.bookname;
author.value = obj.author;
publisher.value = obj.publisher;
});
}
});
// 3 给 确认编辑 绑定点击事件
btn.addEventListener('click', function () {
// 发送一个编辑 网络请求 （地址、方式、参数）
// 请求地址 http://www.itcbc.com:3006/api/updatebook
// 请求方式 PUT
// 请求参数 put请求 携带的参数 放到data
// id 书名 作者 出版社 appkey appkey: 'bbccddaaa',
const booknameValue = bookname.value;
const authorValue = author.value;
const publisherValue = publisher.value;
// id 设置一个全局变量即可
console.log(id);
axios({
url: 'http://www.itcbc.com:3006/api/updatebook',
method: 'PUT',
data: {
bookname: booknameValue,
author: authorValue,
publisher: publisherValue,
id,
appkey: 'bbccddaaa',
},
})
.then(result=>{
// 修改成功 看见最新的数据
render();
})
});
</script>
</body>
</html>
如何区分不同的请求方式携带参数写在data还是params
1. 看文档
Query 参数 url上或者params上
body 参数 data
2. 默认
1. get请求 url或者params
2. post请求 data
3. delete、put、patch 结合文档来看
1. delete 和 get 类似
2. put patch post 类似
3. 试试就知道了！！！
点击按钮的时候 网页 以为你要做 整页数据提交 （在ajax出现之前 前端向后端提交数据的方式！！ ）
1. 如果按照提交数据给服务器来说 现在的前端 不需要用到 form表单和input标签的name属性
2. 如果网页的表单 input特别多 form表单和name有另外一个作用
可以快速来获取表单的数据
3. 解决 form表单和按钮在一起刷新的问题
1. type="button"
2. 刷新 是form 的默认行为 - 阻止 默认行为 方式2
1. form 有一个事件 submit 吗 （当页面执行提交数据）
<form>
<input type="text" name="username" placeholder="请输入用户名" />
<input type="text" name="password" placeholder="请输入密码" />
<button type="submit">登录</button>
<button>登录</button>
<input type="submit" value="也是提交">
</form>
<script>
const form = document.querySelector('form');
// const button = document.querySelector('button');
// button.addEventListener('click', function () {
// console.log('按钮被点击啦');
// });
form.addEventListener('submit', function (event) {
event.preventDefault(); // 阻止 默认行为
console.log('表单提交 但是不刷新');
});
字符串格式数据获取
<pre class="" style="box-sizing: inherit; overflow: auto hidden; font-family: consolas, Courier, "MS Courier New", monospace; tab-size: 4; color: rgb(51, 51, 51); border: none; border-radius: 0px; margin: 0px; padding: 10px 0px; font-size: 12px !important; line-height: 16px !important; white-space: pre; overflow-wrap: normal; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
<script src=["./lib/axios.js"](https://gitee.com/ukSir/front-end-77/blob/ajax%E7%AC%AC2%E5%A4%A9/lib/axios.js)></script>
<script>
axios({
url: 'http://www.itcbc.com:3006/api/addbook',
method: 'POST',
// data: {
// bookname: '演示',
// author: '我自己你不知道',
// publisher: '斑马出版社',
// appkey: 'bbccddaaa',
// },
data: 'bookname=演示&author=我自己你不知道&publisher=斑马出版社&appkey=bbcc33aaa',
}).then(result=>{
console.log(result);
})
</script>
</pre>
快速获取表单的值 jq
<pre class="" style="box-sizing: inherit; overflow: auto hidden; font-family: consolas, Courier, "MS Courier New", monospace; tab-size: 4; color: rgb(51, 51, 51); border: none; border-radius: 0px; margin: 0px; padding: 10px 0px; font-size: 12px !important; line-height: 16px !important; white-space: pre; overflow-wrap: normal; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
<body>
<form>
<input type="text" name="username1" /><input
type="text"
name="username2"
/><input type="text" name="username3" /><input
type="text"
name="username4"
/><input type="text" name="username5" /><input
type="text"
name="username6"
/><input type="text" name="username7" /><input
type="text"
name="username8"
/><input type="text" name="username9" /><input
type="text"
name="username10"
/>
<button>获取表单数据</button>
</form>
<!-- 引入jq的 -->
<script src=["./lib/jquery.js"](https://gitee.com/ukSir/front-end-77/blob/ajax%E7%AC%AC2%E5%A4%A9/lib/jquery.js)></script>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', function (event) {
event.preventDefault();
const query = $('form').serialize();
console.log(query);
});
</script>
</body>
</pre>
原生js获取
<body>
<form>
<input type="text" name="username1" /><input
type="text"
name="username2"
/><input type="text" name="username3" /><input
type="text"
name="username4"
/><input type="text" name="username5" /><input
type="text"
name="username6"
/><input type="text" name="username7" /><input
type="text"
name="username8"
/><input type="text" name="username9" /><input
type="text"
name="username10"
/>
<button>获取表单数据</button>
</form>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', function (event) {
event.preventDefault();
const fd = new FormData(this); // this = form dom元素
const usp = new URLSearchParams(fd);
const query = usp.toString();
console.log(query);
});
</script>
</body>
formdata对象
<script>
/*
FormData
1 FormData 构造函数 可以new 出一个实例
2 FormData 可以存放一些数据的实例（不像普通的obj）
3 调用方法 append(key,value) 添加数据
4 FormData 不像普通的对象 可以直接打印看数据 它比较害羞 打印 它
1 通过 forEach 方法来遍历 FormData 挨个来查看里面的数据
*/
const fd = new FormData();
fd.append("username","悟空");// 添加数据
// fd.append("height","180");// 添加数据
// fd.append("文件名称",文件);// 添加数据
fd.forEach((value,key)=>{
console.log("你要查看的属性名是",key,"属性值是",value);
})
</script>
使用FormData快速获取表单的数据
<body>
<form>
<input type="text" name="username" value="111" />
<input type="text" name="password" value="222" />
<button>获取数据</button>
</form>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', function (event) {
event.preventDefault();
// const fd=new FormData(传入一个form的dom元素);
// const fd=new FormData(form);
const fd = new FormData(this);
const list = [];
fd.forEach((value, key) => {
list.push(`${key}=${value}`);
});
// console.log(list);
const query = list.join('&');
console.log(query);
});
</script>
</body>
URLSearchParams对象
<body>
<form>
<input type="text" name="username" value="111" />
<input type="text" name="password" value="222" />
<button>获取数据</button>
</form>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', function (event) {
event.preventDefault();
// 1 快速把form标签中的表单 获取到 存在 formdata对象中
const fd = new FormData(this);
// 2 把formdata中的表单数据 存在 usp对象
const usp = new URLSearchParams(fd);
// 3 usp对象 有一个方法 专门把数据转成 字符串参数形式 toString()
const query = usp.toString();
console.log(query);
});
function toQuery(form) {
const fd = new FormData(form);
const usp = new URLSearchParams(fd);
const query = usp.toString();
return query;
}
</script>
</body>
axios发送请求的简写方式
<pre class="" style="box-sizing: inherit; overflow: auto hidden; font-family: consolas, Courier, "MS Courier New", monospace; tab-size: 4; color: rgb(51, 51, 51); border: none; border-radius: 0px; margin: 0px; padding: 10px 0px; font-size: 12px !important; line-height: 16px !important; white-space: pre; overflow-wrap: normal; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
<script src=["./lib/axios.js"](https://gitee.com/ukSir/front-end-77/blob/ajax%E7%AC%AC2%E5%A4%A9/lib/axios.js)></script>
<script>
// 利用axios来发送一个get请求
// axios({
// url: 'http://www.itcbc.com:3006/api/getbooks',
// method: 'GET',
// }).then((result) => {
// console.log(result);
// });
// get 请求的简写方式
// axios.get('http://www.itcbc.com:3006/api/getbooks').then((result) => {
// console.log(result);
// });
// get 请求的简写方式 携带参数 把正确的写法 存一份 笔记！！
// axios
// .get('http://www.itcbc.com:3006/api/getbooks', {
// params: { appkey: 'bbccddaaa' },
// })
// .then((result) => {
// console.log(result);
// });
// post 简写
// axios.post("url",参数对象)
axios
.post('http://www.itcbc.com:3006/api/addbook', {
bookname: '演示ttt',
author: '我自己你不知道ttt',
publisher: '斑马出版社ttt',
// 改为只有自己知道的key 长度 6-20
appkey: 'bbccddaaa',
})
.then((result) => {
console.log(result);
});
</script>
</pre>
axios的基地址的设置
<pre class="" style="box-sizing: inherit; overflow: auto hidden; font-family: consolas, Courier, "MS Courier New", monospace; tab-size: 4; color: rgb(51, 51, 51); border: none; border-radius: 0px; margin: 0px; padding: 10px 0px; font-size: 12px !important; line-height: 16px !important; white-space: pre; overflow-wrap: normal; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
<script src=["./lib/axios.js"](https://gitee.com/ukSir/front-end-77/blob/ajax%E7%AC%AC2%E5%A4%A9/lib/axios.js)></script>
<script>
// 定义 axios基地址
axios.defaults.baseURL = 'http://www.itcbc.com:3006';
axios
.get('/api/getbooks', {
params: { appkey: 'bbccddaaa' },
})
.then((result) => {
console.log(result);
});
</script>
</pre>
把图片文件加载到浏览器中显示出来
<body>
<input type="file" name="" id="" />
<img src="" alt="" />
<script>
const input = document.querySelector('input');
const img = document.querySelector('img');
// change事件 触发时期 ： 文件加载到浏览器内存中 触发
input.addEventListener('change', function () {
// files属性查看文件
// console.log(this.files);
// 获取到图片在内存中的地址
// URL.createObjectURL(你想要获取谁的内存地址) 返回 内存中的 文件地址
const url = URL.createObjectURL(this.files[0]);
// 把内存中的图片 的地址 设置给 真正的图片标签
img.src = url;
console.log(url);
});
</script>
</body>
把文件发送给服务器
<pre class="" style="box-sizing: inherit; overflow: auto hidden; font-family: consolas, Courier, "MS Courier New", monospace; tab-size: 4; color: rgb(51, 51, 51); border: none; border-radius: 0px; margin: 0px; padding: 10px 0px; font-size: 12px !important; line-height: 16px !important; white-space: pre; overflow-wrap: normal; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
<body>
<input type="file" name="" id="" />
<img src="" alt="" />
<script src=["./lib/axios.js"](https://gitee.com/ukSir/front-end-77/blob/ajax%E7%AC%AC2%E5%A4%A9/lib/axios.js)></script>
<script>
const input = document.querySelector('input');
const img = document.querySelector('img');
input.addEventListener('change', function () {
const url = URL.createObjectURL(this.files[0]);
img.src = url;
// 使用formData来包装数据
const fd = new FormData();
// 添加数据
// fd.append("avatar",文件)
fd.append('avatar', this.files[0]);
// 请求三大关键
// url method data
// axios.post("http://www.itcbc.com:3006/api/formdata",{a:1,b:2})
axios
.post('http://www.itcbc.com:3006/api/formdata', fd)
.then((result) => {
console.log(result);
});
});
</script>
</body>
</pre>
