查詢
<script src="./lib/axios.js"></script>
<script>
// 請(qǐng)求地址 http://www.itcbc.com:3006/api/getbooks
// 請(qǐng)求方式 GET
// 請(qǐng)求參數(shù) 可以不傳
axios({
// 請(qǐng)求地址
url: 'http://www.itcbc.com:3006/api/getbooks',
// 請(qǐng)求方式
method: 'GET',
// 請(qǐng)求參數(shù) 可以不傳
}).then(function (result) {
// 我們的數(shù)據(jù) 響應(yīng)回來了 .then 里面的函數(shù)就會(huì)觸發(fā) result 擁有了后臺(tái)響應(yīng)的數(shù)據(jù)
console.log(result.data.data);
});
</script>
ajax-把數(shù)據(jù)獲取到前端
<!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-把數(shù)據(jù)獲取到前端而已.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;
}
/* 奇數(shù) */
tr:nth-child(odd) {
background-color: #000;
}
/* 偶數(shù) */
tr:nth-child(even) {
background-color: #333;
}
</style>
</head>
<body>
<!--
顯示 真實(shí) 的 圖片列表信息 顯示到 表格中
-->
<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>
/*
請(qǐng)求的三大關(guān)鍵
1 地址 http://www.itcbc.com:3006/api/getbooks
2 方式 GET
3 參數(shù) 無
*/
axios({
url: 'http://www.itcbc.com:3006/api/getbooks',
method: 'GET',
}).then((result) => {
// console.log(result);
// 獲取返回?cái)?shù)據(jù) 數(shù)組
const arr = result.data.data;
// console.log(arr);
// map 將源數(shù)組 修改 返回成 新的數(shù)組
// join 數(shù)組轉(zhuǎn)成字符串
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請(qǐng)求
<script src="./lib/axios.js"></script>
<script>
/*
axios 發(fā)送get請(qǐng)求 攜帶參數(shù) 兩種方式
1 直接在url上拼接 即可 演示
2 在params 對(duì)象中攜帶
請(qǐng)求的三大關(guān)鍵
1 請(qǐng)求的地址 http://www.itcbc.com:3006/api/getbooks
2 請(qǐng)求的方式 GET
3 請(qǐng)求的參數(shù)
1 bookname=紅樓夢(mèng)
*/
axios({
// 請(qǐng)求參數(shù) 英文的符號(hào)為分割
// ? 前面部分是正常的url
// ? 后面的參數(shù)部分 a=1&b=2
url: 'http://www.itcbc.com:3006/api/getbooks?bookname=斗破蒼穹134&author=我自己',
method: 'GET',
}).then(result=>{
console.log(result);
})
</script>
get請(qǐng)求帶參數(shù)
<script src="./lib/axios.js"></script>
<script>
/*
axios 發(fā)送get請(qǐng)求 攜帶參數(shù) 兩種方式
1 直接在url上拼接 即可 演示
http://www.itcbc.com:3006/api/getbooks?bookname=斗破蒼穹134&author=我自己
2 在params 對(duì)象中攜帶 本質(zhì) 也是 幫我們將對(duì)象 轉(zhuǎn)成了字符串 然后拼接在 url上
3 實(shí)際開發(fā)中 兩種傳遞參數(shù)的方式 都常用的 哪種寫代碼方便就使用哪個(gè)３膛痢３芴ā达址！
*/
axios({
url: 'http://www.itcbc.com:3006/api/getbooks',
method: 'GET',
params: {
bookname: '斗破蒼穹134',
author: '土豆',
},
}).then((result) => {
console.log(result);
});
</script>
快速增加數(shù)據(jù)
<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 長(zhǎng)度 6-20
appkey: 'bbccddaaa',
},
});
}
</script>
查詢屬于自己的數(shù)據(jù)
<script src="./lib/axios.js"></script>
<script>
/*
1 先寫好 靜態(tài)結(jié)構(gòu)
2 一打開頁面的時(shí)候 希望看見 完整的數(shù)據(jù)
1 發(fā)送一次請(qǐng)求 網(wǎng)絡(luò)請(qǐng)求
沒有攜帶 書名 參數(shù)
3 點(diǎn)擊了按鈕
1 獲取輸入框的值
2 拼接成 請(qǐng)求參數(shù)
3 發(fā)送一次新的 網(wǎng)絡(luò)請(qǐng)求 有攜帶 書名 參數(shù)
4 優(yōu)化
程序帶不帶參數(shù) 希望 傳參來實(shí)現(xiàn)
*/
// 發(fā)送網(wǎng)絡(luò)請(qǐng)求 獲取數(shù)據(jù) 渲染頁面
function render(bn) {
// bn 第一次調(diào)用render的時(shí)候 沒有傳參 bn = undefined
// bn 點(diǎn)擊按鈕的 bn 等于 輸入框的值 "演示2"
let params = {
appkey: 'vasdfds3',
};
if (bn) {
// 你知道有哪些 數(shù)據(jù) 轉(zhuǎn)成 布爾類型之后 是 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 發(fā)送請(qǐng)求 獲取數(shù)據(jù)渲染頁面
render();
// 3 獲取按鈕
const input = document.querySelector('input');
const button = document.querySelector('button');
button.addEventListener('click', function () {
// 獲取輸入框值
const bookname = input.value;
render(bookname); // 把參數(shù)傳遞過去即可
});
</script>
post請(qǐng)求
<script src="./lib/axios.js"></script>
<script>
/*
post 新增數(shù)據(jù)
請(qǐng)求的三大關(guān)鍵
1 請(qǐng)求的地址 http://www.itcbc.com:3006/api/addbook
2 請(qǐng)求的方式 POST
3 請(qǐng)求的參數(shù) 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="請(qǐng)輸入書籍" />
<input id="author" type="text" placeholder="請(qǐng)輸入作者" />
<input id="publisher" type="text" placeholder="請(qǐng)輸入出版社" />
<input id="btn" type="button" value="新增" />
</div>
<script src="./lib/axios.js"></script>
<script>
/*
1 靜態(tài)結(jié)構(gòu)
2 給 “新增” 綁定點(diǎn)擊事件
3 事件觸發(fā)了
獲取到一些數(shù)據(jù) 書籍名稱龄章、作者疚顷、出版社 appkey
把數(shù)據(jù) 寫到 axios data屬性 來完成 添加 數(shù)據(jù)功能
*/
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 簡(jiǎn)寫的語法
const data = { bookname, author, publisher, appkey };
// 請(qǐng)求的地址 請(qǐng)求的方式 請(qǐng)求的參數(shù)
axios({
url: 'http://www.itcbc.com:3006/api/addbook',
method: 'POST',
data,
}).then((result) => {
console.log(result);
});
});
</script>
</body>
</html>
圖書刪除(彈出確認(rèn)框)
<!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;
}
/* 奇數(shù) */
tr:nth-child(odd) {
background-color: #000;
}
/* 偶數(shù) */
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>
// 彈出確認(rèn)框 用戶點(diǎn)擊
// 確定 confirm 會(huì)返回true
// 取消 confirm 會(huì)返回false
// if (confirm('您確認(rèn)刪除嗎')) {
// console.log('要?jiǎng)h除');
// } else {
// console.log('取消刪除');
// }
/*
1 調(diào)整 靜態(tài)結(jié)構(gòu) 增加一列 刪除
2 給刪除按鈕綁定點(diǎn)擊事件 (異步的原因?qū)е挛覀儧]有辦法獲取到dom元素 )
1 在確保有標(biāo)簽的情況下你再去獲取 dom元素 不夠優(yōu)雅
2 事件委托Ｔ靶馈！ 笨奠。管呵。
1 找一個(gè) 刪除按鈕的父元素（一直存在網(wǎng)頁中 不是動(dòng)態(tài)生成）
3 點(diǎn)擊事件觸發(fā)了
1 先彈出一個(gè)確認(rèn)框 來詢問用戶 您是否確定刪除
confirm 確認(rèn)框 alert 提示信息
if (confirm('您確認(rèn)刪除嗎'))
2 刪除數(shù)據(jù)（通過某種方式 來告訴服務(wù)器 服務(wù)器刪除數(shù)據(jù)） - 和服務(wù)器通信 ajax 5種方式 get post delete put patch
1 請(qǐng)求方式 delete
2 請(qǐng)求地址 http://www.itcbc.com:3006/api/delbook
3 請(qǐng)求的參數(shù)
id
appkey
*/
// ajax 異步
// 當(dāng)我們開始調(diào)用 axios 只是表示 發(fā)送了一個(gè)網(wǎng)絡(luò)請(qǐng)求 不表示 數(shù)據(jù)馬上響應(yīng)回來
// 也不表示頁面馬上就會(huì)有數(shù)據(jù)
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; // 網(wǎng)頁中 肯定有標(biāo)簽
});
// 2 獲取 刪除按鈕的 父元素 tbody
const tbody = document.querySelector('tbody');
tbody.addEventListener('click', function (event) {
// 判斷你當(dāng)前點(diǎn)擊的 dom元素 是不是我們想要?jiǎng)h除按鈕
if (event.target.className === 'delete-btn') {
// 判斷 用戶 點(diǎn)擊 刪除還是取消
if (confirm('您確定刪除嗎')) {
console.log('要?jiǎng)h除');
} 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;
}
/* 奇數(shù) */
tr:nth-child(odd) {
background-color: #000;
}
/* 偶數(shù) */
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="請(qǐng)輸入書名" />
<input id="author" type="text" placeholder="請(qǐng)輸入作者" />
<input id="publisher" type="text" placeholder="請(qǐng)輸入出版社" />
<input id="btn" type="button" value="確認(rèn)編輯" />
</div>
</div>
</div>
<script src="./lib/axios.js"></script>
<script>
/*
1 點(diǎn)擊編輯按鈕 獲取到 被點(diǎn)擊的按鈕 對(duì)應(yīng)的數(shù)據(jù) 將他們顯示到 表單中
被點(diǎn)擊的按鈕 對(duì)應(yīng)的數(shù)據(jù) 梳毙？？捐下？
1 前端自己去獲取標(biāo)簽中的數(shù)據(jù) 將他們顯示到 新表單中 不建議
2 通用的做法
1 獲取到待編輯的數(shù)據(jù)的 id 根據(jù)id 再去發(fā)送一個(gè)網(wǎng)絡(luò)請(qǐng)求 返回對(duì)應(yīng)的數(shù)據(jù)
const obj={
bookname,id,author,publisher
}
obj.bookname
2 獲取到被編輯的按鈕的 數(shù)據(jù) 的id 獲取對(duì)應(yīng)的數(shù)據(jù)
*/
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) {
// 判斷當(dāng)前點(diǎn)擊的是不是編輯按鈕
if (event.target.className === 'update-btn') {
// 來獲取到 被點(diǎn)擊的 那一些數(shù)據(jù)
// const id=event.target.dataset.id;
id = event.target.dataset.id;
// axios get請(qǐng)求 圖片數(shù)據(jù)
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 給 確認(rèn)編輯 綁定點(diǎn)擊事件
btn.addEventListener('click', function () {
// 發(fā)送一個(gè)編輯 網(wǎng)絡(luò)請(qǐng)求 （地址顿天、方式、參數(shù)）
// 請(qǐng)求地址 http://www.itcbc.com:3006/api/updatebook
// 請(qǐng)求方式 PUT
// 請(qǐng)求參數(shù) put請(qǐng)求 攜帶的參數(shù) 放到data
// id 書名 作者 出版社 appkey appkey: 'bbccddaaa',
const booknameValue = bookname.value;
const authorValue = author.value;
const publisherValue = publisher.value;
// id 設(shè)置一個(gè)全局變量即可
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=>{
// 修改成功 看見最新的數(shù)據(jù)
render();
})
});
</script>
</body>
</html>
如何區(qū)分不同的請(qǐng)求方式攜帶參數(shù)寫在data還是params
1. 看文檔
Query 參數(shù) url上或者params上
body 參數(shù) data
2. 默認(rèn)
1. get請(qǐng)求 url或者params
2. post請(qǐng)求 data
3. delete蔑担、put、patch 結(jié)合文檔來看
1. delete 和 get 類似
2. put patch post 類似
3. 試試就知道了Ｑ拾住Ｆ∥铡！
點(diǎn)擊按鈕的時(shí)候 網(wǎng)頁 以為你要做 整頁數(shù)據(jù)提交 （在ajax出現(xiàn)之前 前端向后端提交數(shù)據(jù)的方式＞Э颉排抬！ ）
1. 如果按照提交數(shù)據(jù)給服務(wù)器來說 現(xiàn)在的前端 不需要用到 form表單和input標(biāo)簽的name屬性
2. 如果網(wǎng)頁的表單 input特別多 form表單和name有另外一個(gè)作用
可以快速來獲取表單的數(shù)據(jù)
3. 解決 form表單和按鈕在一起刷新的問題
1. type="button"
2. 刷新 是form 的默認(rèn)行為 - 阻止 默認(rèn)行為 方式2
1. form 有一個(gè)事件 submit 嗎 （當(dāng)頁面執(zhí)行提交數(shù)據(jù)）
<form>
<input type="text" name="username" placeholder="請(qǐng)輸入用戶名" />
<input type="text" name="password" placeholder="請(qǐng)輸入密碼" />
<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('按鈕被點(diǎn)擊啦');
// });
form.addEventListener('submit', function (event) {
event.preventDefault(); // 阻止 默認(rèn)行為
console.log('表單提交 但是不刷新');
});
字符串格式數(shù)據(jù)獲取
<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>獲取表單數(shù)據(jù)</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>獲取表單數(shù)據(jù)</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對(duì)象
<script>
/*
FormData
1 FormData 構(gòu)造函數(shù) 可以new 出一個(gè)實(shí)例
2 FormData 可以存放一些數(shù)據(jù)的實(shí)例（不像普通的obj）
3 調(diào)用方法 append(key,value) 添加數(shù)據(jù)
4 FormData 不像普通的對(duì)象 可以直接打印看數(shù)據(jù) 它比較害羞 打印 它
1 通過 forEach 方法來遍歷 FormData 挨個(gè)來查看里面的數(shù)據(jù)
*/
const fd = new FormData();
fd.append("username","悟空");// 添加數(shù)據(jù)
// fd.append("height","180");// 添加數(shù)據(jù)
// fd.append("文件名稱",文件);// 添加數(shù)據(jù)
fd.forEach((value,key)=>{
console.log("你要查看的屬性名是",key,"屬性值是",value);
})
</script>
使用FormData快速獲取表單的數(shù)據(jù)
<body>
<form>
<input type="text" name="username" value="111" />
<input type="text" name="password" value="222" />
<button>獲取數(shù)據(jù)</button>
</form>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', function (event) {
event.preventDefault();
// const fd=new FormData(傳入一個(gè)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對(duì)象
<body>
<form>
<input type="text" name="username" value="111" />
<input type="text" name="password" value="222" />
<button>獲取數(shù)據(jù)</button>
</form>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', function (event) {
event.preventDefault();
// 1 快速把form標(biāo)簽中的表單 獲取到 存在 formdata對(duì)象中
const fd = new FormData(this);
// 2 把formdata中的表單數(shù)據(jù) 存在 usp對(duì)象
const usp = new URLSearchParams(fd);
// 3 usp對(duì)象 有一個(gè)方法 專門把數(shù)據(jù)轉(zhuǎn)成 字符串參數(shù)形式 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發(fā)送請(qǐng)求的簡(jiǎn)寫方式
<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來發(fā)送一個(gè)get請(qǐng)求
// axios({
// url: 'http://www.itcbc.com:3006/api/getbooks',
// method: 'GET',
// }).then((result) => {
// console.log(result);
// });
// get 請(qǐng)求的簡(jiǎn)寫方式
// axios.get('http://www.itcbc.com:3006/api/getbooks').then((result) => {
// console.log(result);
// });
// get 請(qǐng)求的簡(jiǎn)寫方式 攜帶參數(shù) 把正確的寫法 存一份 筆記！授段！
// axios
// .get('http://www.itcbc.com:3006/api/getbooks', {
// params: { appkey: 'bbccddaaa' },
// })
// .then((result) => {
// console.log(result);
// });
// post 簡(jiǎn)寫
// axios.post("url",參數(shù)對(duì)象)
axios
.post('http://www.itcbc.com:3006/api/addbook', {
bookname: '演示ttt',
author: '我自己你不知道ttt',
publisher: '斑馬出版社ttt',
// 改為只有自己知道的key 長(zhǎng)度 6-20
appkey: 'bbccddaaa',
})
.then((result) => {
console.log(result);
});
</script>
</pre>
axios的基地址的設(shè)置
<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事件 觸發(fā)時(shí)期 ： 文件加載到瀏覽器內(nèi)存中 觸發(fā)
input.addEventListener('change', function () {
// files屬性查看文件
// console.log(this.files);
// 獲取到圖片在內(nèi)存中的地址
// URL.createObjectURL(你想要獲取誰的內(nèi)存地址) 返回 內(nèi)存中的 文件地址
const url = URL.createObjectURL(this.files[0]);
// 把內(nèi)存中的圖片 的地址 設(shè)置給 真正的圖片標(biāo)簽
img.src = url;
console.log(url);
});
</script>
</body>
把文件發(fā)送給服務(wù)器
<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來包裝數(shù)據(jù)
const fd = new FormData();
// 添加數(shù)據(jù)
// fd.append("avatar",文件)
fd.append('avatar', this.files[0]);
// 請(qǐng)求三大關(guān)鍵
// 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>
