Ajax入门以及Axios的详细使用（含Promise）

标签：Axios const url Ajax axios Promise result document data

1. 概述

1.1 是什么

Ajax = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
Ajax 不是新的编程语言，而是一种用于创建快速动态网页的技术
Ajax 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，使网页实现异步更新
传统的网页（不使用 Ajax）如果需要更新内容，必需重载整个网页
Ajax 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行
XMLHttpRequest只是实现 Ajax 的一种方式

1.2 为什么

以前数据都是写在代码里固定的, 无法随时变化
现在数据可以从服务器上进行获取，让数据变活

1.3 入门程序

需求：从服务器获取省份列表数据，展示到页面上

步骤：

引入 axios

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

基本语法

axios({
	url: "目标资源地址",
}).then(result => {
	// 对服务器返回的数据做后续处理
});

示例

<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
	axios({
		url: "http://hmajax.itheima.net/api/province",
	}).then(result => {
		document.querySelector("#root").innerHTML = result.data.list.join("<br>");
	});
</script>

2. axios

2.1 URL

URL：统一资源定位符，简称网址，用于定位网络中的资源（网页，图片，数据，视频，音频等）
组成：协议，域名，资源路径（比较重要的三部分）
http 协议：超文本传输协议，规定了浏览器和服务器传递数据的格式
域名：标记服务器在互联网当中的方位，网络中有很多服务器，你想访问哪一台，需要知道它的域名
资源路径：一个服务器内有多个资源，用于标识你要访问的资源具体的位置

查询参数：携带给服务器额外信息，让服务器返回想要的某一部分数据而不是全部数据
- 格式：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
- 参数名一般是后端规定的，值前端看情况传递即可
axios 如何携带查询参数？

axios({
	url: "目标资源地址",
	params: {
		参数名: 值,
	},
}).then(result => {
	// 对服务器返回的数据做后续处理
});

示例 1：获取“河北省”下属的城市列表

<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
	axios({
		url: "http://hmajax.itheima.net/api/city",
		params: {
			pname: "河北省",
		},
	}).then(result => {
		document.querySelector("#root").innerHTML = result.data.list.join("<br>");
	});
</script>

示例 2：根据输入的省份名字和城市名字，查询下属地区列表

<!-- 样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
<style>
	#root {
		font-size: 15px;
	}

	body {
		padding-top: 15px;
	}
</style>

<div class="container">
	<form id="editForm" class="row">
		<!-- 输入省份名字 -->
		<div class="mb-3 col">
			<label class="form-label">省份名字</label>
			<input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称" />
		</div>
		<!-- 输入城市名字 -->
		<div class="mb-3 col">
			<label class="form-label">城市名字</label>
			<input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称" />
		</div>
	</form>
	<button type="button" class="btn btn-primary sel-btn">查询</button>
	<br />
	<br />
	<p>地区列表:</p>
	<ul class="list-group">
		<!-- 示例地区 -->
		<!-- <li class="list-group-item">东城区</li> -->
	</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
	/*
      获取地区列表: http://hmajax.itheima.net/api/area
      查询参数:
        pname: 省份或直辖市名字
        cname: 城市名字
    */
	// 绑定点击事件
	document.querySelector(".sel-btn").addEventListener("click", () => {
		// 获取输入框的值
		let pName = document.querySelector(".province").value;
		let cName = document.querySelector(".city").value;

		// 利用axios获取数据
		axios({
			url: "http://hmajax.itheima.net/api/area",
			params: {
				pname: pName,
				cname: cName,
			},
		}).then(result => {
			document.querySelector(".list-group").innerHTML = result.data.list
				.map(item => `<li class="list-group-item">${item}</li>`)
				.join("");
		});
	});
</script>

2.2 数据提交

常用请求方法

请求方法	操作
GET	获取数据（默认请求方式）
POST	提交数据
PUT	修改数据（全部）
DELETE	删除数据
PATCH	修改数据（部分）

axios 如何提交数据到服务器

axios({
	url: "目标资源地址",
	method: "请求方法",
	data: {
		参数名: 值,
	},
}).then(result => {
	// 对服务器返回的数据做后续处理
});

示例：注册账号，提交用户名和密码到服务器保存

<button>点击注册</button>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
	document.querySelector("button").addEventListener("click", () => {
		axios({
			url: "http://hmajax.itheima.net/api/register",
			method: "post",
			data: {
				username: "itheima666",
				password: "12345678",
			},
		}).then(result => {
			console.log(result);
		});
	});
</script>

2.3 axios 错误处理

axios({
	// ...请求选项
})
	.then(result => {
		// 处理成功数据
	})
	.catch(error => {
		// 处理失败错误
	});

示例：

<button>点击注册</button>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
	document.querySelector("button").addEventListener("click", () => {
		axios({
			url: "http://hmajax.itheima.net/api/register",
			method: "post",
			data: {
				username: "itheima666",
				password: "12345678",
			},
		})
			.then(result => {
				console.log(result);
			})
			.catch(error => {
				alert(error.response.data.message);
			});
	});
</script>

2.4 案例-用户登录

样式

<!-- 引入bootstrap.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" />
<!-- 公共 -->
<style>
	html,
	body {
		background-color: #edf0f5;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.container {
		width: 520px;
		height: 540px;
		background-color: #fff;
		padding: 60px;
		box-sizing: border-box;
	}

	.container h3 {
		font-weight: 900;
	}
</style>
<!-- 表单容器和内容 -->
<style>
	.form_wrap {
		color: #8b929d !important;
	}

	.form-text {
		color: #8b929d !important;
	}
</style>
<!-- 提示框样式 -->
<style>
	.alert {
		transition: 0.5s;
		opacity: 0;
	}

	.alert.show {
		opacity: 1;
	}
</style>

框架

<div class="container">
	<h3>欢迎-登录</h3>
	<!-- 登录结果-提示框 -->
	<div class="alert alert-success" role="alert">
		<!-- 提示消息 -->
	</div>
	<!-- 表单 -->
	<div class="form_wrap">
		<form>
			<div class="mb-3">
				<label for="username" class="form-label">账号名</label>
				<input type="text" class="form-control username" />
			</div>
			<div class="mb-3">
				<label for="password" class="form-label">密码</label>
				<input type="password" class="form-control password" />
			</div>
			<button type="button" class="btn btn-primary btn-login">登 录</button>
		</form>
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
	// 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
	function alertFn(msg, isSuccess) {
		// 显示提示框
		let myAlert = document.querySelector(".alert");
		myAlert.classList.add("show");
		// 更换样式
		let bgc = isSuccess ? "alert-success" : "alert-danger";
		myAlert.classList.add(bgc);
		// 打印信息
		myAlert.innerText = msg;
		// 2s后自动消失
		setTimeout(() => {
			myAlert.classList.remove("show");
			// 重置背景色，避免类名冲突
			myAlert.classList.remove(bgc);
		}, 2000);
	}
	document.querySelector(".btn-login").addEventListener("click", () => {
		let username = document.querySelector(".username").value;
		let password = document.querySelector(".password").value;

		if (username.length < 8) {
			// console.log('用户名不能少于8个字符')
			alertFn("用户名不能少于8个字符", false);
			return;
		}
		if (password < 6) {
			// console.log('密码不能少于6个字符')
			alertFn("密码不能少于6个字符", false);
			return;
		}

		axios({
			url: "http://hmajax.itheima.net/api/login",
			method: "post",
			data: {
				username,
				password,
			},
		})
			.then(result => {
				// alert(result.data.message)
				alertFn(result.data.message, true);
			})
			.catch(error => {
				// alert(error.response.data.message)
				alertFn(error.response.data.message, false);
			});
	});
</script>

2.5 form-serialize 插件

快速收集目标表单范围内表单元素的值

引入 form-serialize 插件
使用 serialize 函数
- 参数 1：要获取的 form 表单标签对象（要求表单元素有 name 属性，用来作为收集的数据中属性名）
- 参数 2：配置对象
  - hash：
    - true - 收集出来的是一个 JS 对象
    - false - 收集出来的是一个查询字符串
  - empty：
    - true - 收集空值
    - false - 不收集空值
示例：收集登录表单里用户名和密码

<form action="javascript:;" class="example-form">
	<input type="text" name="uname" />
	<br />
	<input type="text" name="pwd" />
	<br />
	<input type="button" class="btn" value="提交" />
</form>
<!-- 
目标：在点击提交时，使用form-serialize插件，快速收集表单元素值
-->
<script src="./form-serialize.js"></script>
<script>
	document.querySelector(".btn").addEventListener("click", () => {
		const form = document.querySelector(".example-form");
		const data = serialize(form, { hash: true, empty: true });
		console.log(data);
	});
</script>

2.6 Bootstrap 弹框

2.6.1 属性控制

引入 bootstrap.css 和 bootstrap.js
准备弹框标签，确认结构（可以从 Bootstrap 官方文档的 Modal 里复制基础例子）- 运行到网页后，逐一对应标签和弹框每个部分对应关系
通过自定义属性，通知弹框的显示和隐藏，语法如下：

<button data-bs-toggle="modal" data-bs-target="css选择器">显示弹框</button>

<button data-bs-dismiss="modal">Close</button>

代码实现

<!-- 
目标：使用Bootstrap弹框
1. 引入bootstrap.css和bootstrap.js
2. 准备弹框标签，确认结构
3. 通过自定义属性，控制弹框的显示和隐藏
-->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".mybox">显示弹框</button>

<div class="modal mybox" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Modal title</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<p>Modal body text goes here.</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>

2.6.2 js 控制

为什么需要 js 方式控制？
- 当显示/隐藏之前，需要执行一些 JS 逻辑代码，就需要引入 JS 控制弹框显示/隐藏的方式
例如：
- 点击编辑姓名按钮，在弹框显示之前，在输入框填入默认姓名
- 点击保存按钮，在弹框隐藏之前，获取用户填入的名字并打印

语法

// 创建弹框对象
const modalDom = document.querySelector("css选择器");
const modal = new bootstrap.Modal(modelDom);

// 显示弹框
modal.show();
// 隐藏弹框
modal.hide();

示例

<!-- 
目标：使用JS控制弹框，显示和隐藏
1. 创建弹框对象
2. 调用弹框对象内置方法
.show() 显示
.hide() 隐藏
-->
<button type="button" class="btn btn-primary edit-btn">编辑姓名</button>

<div class="modal name-box" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">请输入姓名</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<form action="">
					<span>姓名：</span>
					<input type="text" class="username" />
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
				<button type="button" class="btn btn-primary save-btn">保存</button>
			</div>
		</div>
	</div>
</div>

<!-- 引入bootstrap.js -->
<script src="./bootstrap.min.js"></script>
<script>
	const modalBox = document.querySelector(".name-box");
	const modal = new bootstrap.Modal(modalBox);

	document.querySelector(".edit-btn").addEventListener("click", () => {
		document.querySelector(".username").value = "默认姓名";
		modal.show();
	});

	document.querySelector(".save-btn").addEventListener("click", () => {
		const username = document.querySelector(".username").value;
		console.log("将数据提交到服务器", username);
		modal.hide();
	});
</script>

2.7 案例-图书管理

黑马接口文档
结构

<!-- 主体区域 -->
<div class="container">
	<!-- 头部标题和添加按钮 -->
	<div class="top">
		<h3>图书管理</h3>
		<button type="button" class="btn btn-primary plus-btn" data-bs-toggle="modal" data-bs-target=".add-modal">
			+ 添加
		</button>
	</div>
	<!-- 数据列表 -->
	<table class="table">
		<thead class="table-light">
			<tr>
				<th style="width: 150px;">序号</th>
				<th>书名</th>
				<th>作者</th>
				<th>出版社</th>
				<th style="width: 180px;">操作</th>
			</tr>
		</thead>
		<tbody class="list">
			<!-- <tr>
					<td>1</td>
					<td>JavaScript程序设计</td>
					<td>马特·弗里斯比</td>
					<td>人民邮电出版社</td>
					<td>
						<span class="del">删除</span>
						<span class="edit">编辑</span>
					</td>
			</tr> -->
		</tbody>
	</table>
</div>
<!-- 新增-弹出框 -->
<div class="modal fade add-modal">
	<!-- 中间白色区域 -->
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header top">
				<span>添加图书</span>
				<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
			</div>
			<div class="modal-body form-wrap">
				<!-- 新增表单 -->
				<form class="add-form">
					<div class="mb-3">
						<label for="bookname" class="form-label">书名</label>
						<input type="text" class="form-control bookname" placeholder="请输入书籍名称" name="bookname" />
					</div>
					<div class="mb-3">
						<label for="author" class="form-label">作者</label>
						<input type="text" class="form-control author" placeholder="请输入作者名称" name="author" />
					</div>
					<div class="mb-3">
						<label for="publisher" class="form-label">出版社</label>
						<input type="text" class="form-control publisher" placeholder="请输入出版社名称" name="publisher" />
					</div>
				</form>
			</div>
			<div class="modal-footer btn-group">
				<button type="button" class="btn btn-primary" data-bs-dismiss="modal">取消</button>
				<button type="button" class="btn btn-primary add-btn">保存</button>
			</div>
		</div>
	</div>
</div>
<!-- 编辑-弹出框 -->
<div class="modal fade edit-modal">
	<!-- 中间白色区域 -->
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header top">
				<span>编辑图书</span>
				<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
			</div>
			<div class="modal-body form-wrap">
				<!-- 编辑表单 -->
				<form class="edit-form">
					<!-- 保存正在编辑的图书id,隐藏起来：无需让用户修改 -->
					<input type="hidden" class="id" name="id" />
					<div class="mb-3">
						<label for="bookname" class="form-label">书名</label>
						<input type="text" class="form-control bookname" placeholder="请输入书籍名称" name="bookname" />
					</div>
					<div class="mb-3">
						<label for="author" class="form-label">作者</label>
						<input type="text" class="form-control author" placeholder="请输入作者名称" name="author" />
					</div>
					<div class="mb-3">
						<label for="publisher" class="form-label">出版社</label>
						<input type="text" class="form-control publisher" placeholder="请输入出版社名称" name="publisher" />
					</div>
				</form>
			</div>
			<div class="modal-footer btn-group">
				<button type="button" class="btn btn-primary" data-bs-dismiss="modal">取消</button>
				<button type="button" class="btn btn-primary edit-btn">修改</button>
			</div>
		</div>
	</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios.min.js"></script>
<script src="./lib/form-serialize.js"></script>
<script src="./lib/bootstrap.min.js"></script>
<!-- 核心逻辑 -->
<script src="./js/index.js"></script>

index.js
渲染图书列表

/**
 * 目标1：渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */

const creator = "老李";

function getBooksList() {
	// 1.1 获取数据
	axios({
		url: "http://hmajax.itheima.net/api/books",
		params: {
			creator,
		},
	}).then(result => {
		// console.log(result.data.data)
		// 1.2 渲染数据
		const list = result.data.data
			.map((item, index) => {
				return `
                <tr>
                    <td>${index + 1}</td>
                    <td>${item.bookname}</td>
                    <td>${item.author}</td>
                    <td>${item.publisher}</td>
                    <td data-id=${item.id}>
                        <span class="del">删除</span>
                        <span class="edit">编辑</span>
                    </td>
                </tr>
            `;
			})
			.join("");
		document.querySelector(".list").innerHTML = list;
	});
}

getBooksList();

新增图书

/**
 * 目标2：新增图书
 *  2.1新增弹框->显示和隐藏
 *  2.2收集表单数据，并提交到服务器保存
 *  2.3刷新图书列表
 */
const addModalDom = document.querySelector(".add-modal");
const addModal = new bootstrap.Modal(addModalDom);

// 2.1 新增弹框->显示和隐藏
document.querySelector(".add-btn").addEventListener("click", () => {
	// 2.2 获取输入框的数据
	const addForm = document.querySelector(".add-form");
	const formData = serialize(addForm, { hash: true, empty: true });
	console.log(formData);

	// 2.3 提交到服务器保存
	axios({
		url: "http://hmajax.itheima.net/api/books",
		method: "post",
		data: {
			...formData,
			creator,
		},
	}).then(result => {
		console.log(result);
		// 2.4 重新渲染页面
		getBooksList();
		// 重置表单
		addForm.reset();
		// 点击保存，隐藏模态框
		addModal.hide();
	});
});

删除图书

/**
 * 目标3：删除图书
 *  3.1删除元素绑定点击事件->获取图书id
 *  3.2调用删除接口
 *  3.3刷新图书列表
 */
// 3.1 删除元素绑定点击事件（事件委托）->获取图书id
document.querySelector(".list").addEventListener("click", e => {
	if (e.target.classList.contains("del")) {
		const theId = e.target.parentNode.dataset.id;

		// 3.2 调用删除接口
		axios({
			url: `http://hmajax.itheima.net/api/books/${theId}`,
			method: "delete",
		}).then(() => {
			// 3.3 刷新图书列表
			getBooksList();
		});
	}
});

编辑图书

/**
 * 目标4：编辑图书
 *  4.1编辑弹框->显示和隐藏
 *  4.2获取当前编辑图书数据->回显到编辑表单中
 *  4.3提交保存修改，并刷新列表
 */
const editModalDom = document.querySelector(".edit-modal");
const editModal = new bootstrap.Modal(editModalDom);

document.querySelector(".list").addEventListener("click", e => {
	if (e.target.classList.contains("edit")) {
		const theId = e.target.parentNode.dataset.id;
		// 4.2 获取当前编辑图书数据->回显到编辑表单中
		axios({
			url: `http://hmajax.itheima.net/api/books/${theId}`,
			method: "get",
		}).then(result => {
			// 数据对象"属性"和标签"类名"一致
			// 遍历数据对象，使用属性去获取对应的标签，快速赋值
			const bookObj = result.data.data;
			// console.log(bookObj)
			const keys = Object.keys(bookObj);
			keys.forEach(key => {
				document.querySelector(`.edit-form .${key}`).value = bookObj[key];
			});
		});
		// 4.1 编辑弹框->显示和隐藏
		editModal.show();
	}
});

document.querySelector(".edit-btn").addEventListener("click", () => {
	const editForm = document.querySelector(".edit-form");
	const editData = serialize(editForm, { hash: true, empty: true });

	// 4.3 提交保存修改，并刷新列表
	axios({
		url: `http://hmajax.itheima.net/api/books/${editData.id}`,
		method: "put",
		data: {
			...editData,
			creator,
		},
	}).then(() => {
		getBooksList();
	});
	editModal.hide();
});

总结
- 渲染列表（查）
  - 获取数据
  - 渲染数据
- 新增图书（增）
  - 弹框（显示/隐藏）
  - 收集数据&提交保存
  - 刷新页面列表
- 删除图书（删）
  - 绑定点击事件（获取要删除的图书 id）
  - 调用删除接口（让服务器删除此数据）
  - 成功后重新获取并刷新列表
- 编辑图书（改）
  - 弹框（显示/隐藏）
  - 表单（数据回显）
  - 点击修改收集数据，提交到服务器保存
  - 重新获取并刷新列表

2.8 图片上传

把本地的图片上传到网页上显示

实现步骤
- 获取图片文件对象：e.target.files[0]
- 使用 FormData 表单数据对象装入
```
const fd = new FormData();
fd.append(参数名, 值);
```
- 提交表单数据对象，使用服务器返回图片 url 网址

<!-- 文件选择元素 -->
<input type="file" class="upload" />
<img src="" alt="" />

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
	document.querySelector(".upload").addEventListener("change", e => {
		// 1. 获取图片文件
		// console.log(e.target.files[0])

		// 2. 使用 FormData 携带图片文件
		const fd = new FormData();
		fd.append("img", e.target.files[0]);

		// 3. 提交到服务器，获取图片url网址使用
		axios({
			url: "http://hmajax.itheima.net/api/uploadimg",
			method: "post",
			data: fd,
		}).then(result => {
			// console.log(result)
			document.querySelector("img").src = result.data.data.url;
		});
	});
</script>

示例：更换背景图片

<div class="container">
	<div class="nav">
		<div class="left">
			<ul>
				<li><a href="http://yun.itheima.com/?webzly" target="_blank" rel="nofollow">免费教程</a></li>
				<li><a href="http://resource.ityxb.com/booklist/?webzly" target="_blank" rel="nofollow">原创书籍</a></li>
				<li>
					<a href="http://www.itheima.com/teacher.html?webzly#ajavaee" target="_blank" rel="nofollow">教研团队</a>
				</li>
				<li>
					<a href="http://www.itheima.com/special/hmschool/index.shtml?webzly" target="_blank" rel="nofollow">
						校区汇总
					</a>
				</li>
				<li><a href="http://www.itheima.com/flow/flow.html?webzly" target="_blank" rel="nofollow">报名流程</a></li>
				<li><a href="https://pip.itcast.cn?hmgw$webzly" target="_blank" rel="nofollow">项目信息站</a></li>
				<li><a href="http://bbs.itheima.com/forum.php?webzly" target="_blank" rel="nofollow">技术社区</a></li>
			</ul>
		</div>
		<div class="right">
			<label for="bg">更换背景</label>
			<input class="bg-ipt" type="file" id="bg" />
		</div>
	</div>
	<div class="search-container">
		<img src="https://www.itheima.com/images/logo.png" alt="" />
		<div class="search-box">
			<input type="text" />
			<button>搜索一下</button>
		</div>
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- 核心代码 -->
<script src="./js/index.js"></script>

index.js

document.querySelector(".bg-ipt").addEventListener("change", e => {
	// 1. 选择图片上传，设置body背景
	const fd = new FormData();
	fd.append("img", e.target.files[0]);

	axios({
		url: "http://hmajax.itheima.net/api/uploadimg",
		method: "post",
		data: fd,
	}).then(result => {
		// console.log(result)
		const imgUrl = result.data.data.url;
		document.body.style.backgroundImage = `url(${imgUrl})`;

		// 2. 上传成功时，"保存"图片url网址
		localStorage.setItem("bgImg", imgUrl);
	});
});

// 3. 网页运行后，获取url网址使用
const imgUrl = localStorage.getItem("bgImg");
document.body.style.backgroundImage = `url(${imgUrl})`;

2.9 案例-个人信息设置

结构

<!-- toast 提示框 -->
<div class="toast my-toast" data-bs-delay="1500">
    <div class="toast-body">
        <div class="alert alert-success info-box">
            操作成功
        </div>
    </div>
</div>
<!-- 核心内容区域 -->
<div class="container">
    <ul class="my-nav">
        <li class="active">基本设置</li>
        <li>安全设置</li>
        <li>账号绑定</li>
        <li>新消息通知</li>
    </ul>
    <div class="content">
        <div class="info-wrap">
            <h3 class="title">基本设置</h3>
            <form class="user-form" action="javascript:;">
                <div class="form-item">
                    <label for="email">邮箱</label>
                    <input id="email" name="email" class="email" type="text" placeholder="请输入邮箱" autocomplete="off">
                </div>
                <div class="form-item">
                    <label for="nickname">昵称</label>
                    <input id="nickname" name="nickname" class="nickname" type="text" placeholder="请输入昵称" autocomplete="off">
                </div>
                <div class="form-item">
                    <label>性别</label>
                    <label class="male-label"><input type="radio" name="gender" class="gender" value="0">男</label>
                    <label class="male-label"><input type="radio" name="gender" class="gender" value="1">女</label>
                </div>
                <div class="form-item">
                    <label for="desc">个人简介</label>
                    <textarea id="desc" name="desc" class="desc" placeholder="请输入个人简介" cols="20" rows="10" autocomplete="off"></textarea>
                </div>
                <button class="submit">提交</button>
            </form>
        </div>
        <div class="avatar-box">
            <h4 class="avatar-title">头像</h3>
            <img class="prew" src="./img/头像.png" alt="">
            <label for="upload">更换头像</label>
            <input id="upload" type="file" class="upload">
        </div>

    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
<script src="./lib/form-serialize.js"></script>
<!-- 核心逻辑 -->
<script src="./js/index.js"></script>

index.js
信息渲染

/**
 * 目标1：信息渲染
 *  1.1 获取用户的数据
 *  1.2 回显数据到标签上
 * */

const creator = "小明";
axios({
	url: "http://hmajax.itheima.net/api/settings",
	params: {
		creator,
	},
}).then(result => {
	// console.log(result.data.data)
	const userObj = result.data.data;

	const keys = Object.keys(userObj);
	keys.forEach(key => {
		// 头像和性别比较特殊，需要单独处理
		if (key === "avatar") {
			document.querySelector(".prew").src = userObj[key];
		} else if (key === "gender") {
			const gRadioList = document.querySelectorAll(".gender");
			// 0男，1女，刚好与数组下标对应
			const gNum = userObj[key];
			gRadioList[gNum].checked = true;
		} else {
			document.querySelector(`.${key}`).value = userObj[key];
		}
	});
});

修改头像

/**
 * 目标2：修改头像
 *  2.1 获取头像文件
 *  2.2 提交服务器并更新头像
 */

document.querySelector(".upload").addEventListener("change", e => {
	const fd = new FormData();
	fd.append("img", e.target.files[0]);
	fd.append("creator", creator);

	axios({
		url: "http://hmajax.itheima.net/api/avatar",
		method: "put",
		data: fd,
	}).then(result => {
		document.querySelector(".prew").src = result.data.data.avatar;
	});
});

修改数据，并提示

/**
 * 目标3：提交表单
 *  3.1 收集表单信息
 *  3.2 交到服务器保存
 */

/**
 * 目标4：结果提示
 *  4.1 创建toast对象
 *  4.2 调用show方法->显示提示框
 */

document.querySelector(".submit").addEventListener("click", () => {
	// 3.1 收集表单信息
	const form = document.querySelector(".user-form");
	const formData = serialize(form, { hash: true, empty: true });
	formData.creator = creator;
	formData.gender = +formData.gender;

	// 3.2 提交到服务器保存
	axios({
		url: "http://hmajax.itheima.net/api/settings",
		method: "put",
		data: formData,
	}).then(result => {
		// 4.1 创建toast对象
		const toastDom = document.querySelector(".my-toast");
		const toast = new bootstrap.Toast(toastDom);

		// 4.2 调用show方法->显示提示框
		toast.show();
	});
});

2.10 请求方式别名

为了方便起见，已经为所有支持的请求方法提供了别名

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])

注：在使用别名方法时， url、method、data 这些属性都不必在配置中指定

2.11 Axios API

2.11.1 axios 实例

可以使用自定义配置新建一个实例

const instance = axios.create({
	baseURL: "https://some-domain.com/api/",
	timeout: 1000,
	headers: { "X-Custom-Header": "foobar" },
});

一些实例方法
- axios#request(config)
- axios#get(url[, config])
- axios#delete(url[, config])
- axios#head(url[, config])
- axios#options(url[, config])
- axios#post(url[, data[, config]])
- axios#put(url[, data[, config]])
- axios#patch(url[, data[, config]])
- axios#getUri([config])

2.11.2 请求配置

这些是创建请求时可以用的配置选项，只有url是必需的
若没指定method，请求默认使用GET

{
  // url：用于请求的服务器URL
  url: '/user',

  // method：创建请求时使用的方法，默认为get
  method: 'get',

  // baseURL：自动加在url前面，通过它可以传递相对地址
  baseURL: 'https://some-domain.com/api/',

  // transformRequest：允许在向服务器发送前，修改请求数据
  // 它只能用于'PUT', 'POST'和'PATCH'这几个请求方法
  // 数组中最后一个函数必须返回一个字符串， 一个Buffer实例，ArrayBuffer，FormData或Stream
  // 可以修改请求头
  transformRequest: [function (data, headers) {
    // 对发送的 data 进行任意转换处理

    return data;
  }],

  // transformResponse：在传递给then/catch前，允许修改响应数据
  transformResponse: [function (data) {
    // 对接收的 data 进行任意转换处理

    return data;
  }],

  // 自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // params：与请求一起发送的URL参数
  // 必须是一个简单对象或URLSearchParams对象
  params: {
    ID: 12345
  },

  // data：作为请求体被发送的数据
  // 仅适用'PUT', 'POST', 'DELETE'和'PATCH'请求方法
  // 在没有设置`transformRequest`时，则必须是以下类型之一:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属: FormData, File, Blob
  // - Node 专属: Stream, Buffer
  data: {
    firstName: 'Fred'
  },

  // 发送请求体数据的可选语法
  // 请求方式 post
  // 只有 value 会被发送，key 则不会
  data: 'Country=Brasil&City=Belo Horizonte',

  // timeout：指定请求超时的毫秒数
  // 如果请求时间超过`timeout`的值，则请求会被中断，默认为0，表示永不超时
  timeout: 1000,

  // withCredentials：表示跨域请求时是否需要使用凭证，默认false
  withCredentials: false,

  // adapter：允许自定义处理请求，这使测试更加容易
  // 返回一个`promise`并提供一个有效的响应（参见 lib/adapters/README.md）
  adapter: function (config) {
    /* ... */
  },

  // auth：HTTP Basic Auth
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

  // responseType：浏览器将要响应的数据类型
  // 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'
  // 浏览器专属：'blob'
  responseType: 'json', // 默认值

  // responseEncoding：用于解码响应的编码 (Node.js专属)
  // 注意：忽略`responseType`的值为 'stream'，或者是客户端请求
  responseEncoding: 'utf8', // 默认值

  // `xsrfCookieName`是`xsrf token`的值，被用作`cookie`的名称
  xsrfCookieName: 'XSRF-TOKEN', // 默认值

  // `xsrfHeaderName`是带有`xsrf token`值的http请求头名称
  xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值

  // `onUploadProgress`允许为上传处理进度事件（浏览器专属）
  onUploadProgress: function (progressEvent) {
    // 处理原生进度事件
  },

  // `onDownloadProgress`允许为下载处理进度事件（浏览器专属）
  onDownloadProgress: function (progressEvent) {
    // 处理原生进度事件
  },

  // `maxContentLength`定义了node.js中允许的HTTP响应内容的最大字节数
  maxContentLength: 2000,

  // `maxBodyLength`（仅Node）定义允许的http请求内容的最大字节数
  maxBodyLength: 2000,

  // `validateStatus`定义了对于给定的HTTP状态码是 resolve 还是 reject promise
  // 返回`true`(或者设置为`null`或`undefined`)，则promise将会resolved，否则是rejected
  validateStatus: function (status) {
    return status >= 200 && status < 300; // 默认值
  },

  // maxRedirects：定义了在node.js中要遵循的最大重定向数，设置为0，则不会进行重定向
  maxRedirects: 5, // 默认值

  // `socketPath` 定义了在node.js中使用的UNIX套接字
  // e.g. '/var/run/docker.sock' 发送请求到 docker 守护进程
  // 只能指定 `socketPath` 或 `proxy`
  // 若都指定，则使用 `socketPath`
  socketPath: null, // default

  // `httpAgent`和`httpsAgent`分别定义了在 node.js 中执行 http 和 https 请求时使用的自定义代理
  // 这样就可以添加默认情况下未启用的选项，如`keepAlive`
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // `proxy` 定义了代理服务器的主机名，端口和协议
  // 可以使用常规的`http_proxy`和`https_proxy` 环境变量
  // 使用`false`可以禁用代理功能，同时环境变量也会被忽略
  // `auth`表示应使用HTTP Basic auth连接到代理，并且提供凭据
  // 这将设置一个`Proxy-Authorization`请求头，它会覆盖`headers`中已存在的自定义`Proxy-Authorization`请求头
  // 如果代理服务器使用 HTTPS，则必须设置 protocol 为`https`
  proxy: {
    protocol: 'https',
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

  // 详见https://axios-http.com/zh/docs/cancellation
  cancelToken: new CancelToken(function (cancel) {
  }),

  // `decompress`：表示是否要自动解压缩响应正文
  // 将其设置为"false"，它不会解压缩响应，并会保留原始的"Content-Encoding"标头
  // 如果设置为“true”，将从所有解压缩响应的响应对象中移除"Content-Encoding"标头
  // - 仅适用于Node (XHR 无法关闭解压缩功能)
  decompress: true // 默认值
}

2.11.3 响应结构

一个请求的响应包含以下信息

{
  // data：由服务器提供的响应
  data: {},

  // status：来自服务器响应的 HTTP 状态码
  status: 200,

  // statusText：来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // headers：服务器响应头
  // 所有 header 名称都是小写，且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},

  // config：是`axios`请求的配置信息
  config: {},

  // request：是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}

Ajax入门以及Axios的详细使用（含Promise）

1. 概述

1.1 是什么

1.2 为什么

1.3 入门程序

2. axios

2.1 URL

2.2 数据提交

2.3 axios 错误处理

2.4 案例-用户登录

2.5 form-serialize 插件

2.6 Bootstrap 弹框

2.6.1 属性控制

2.6.2 js 控制

2.7 案例-图书管理

2.8 图片上传

2.9 案例-个人信息设置

2.10 请求方式别名

2.11 Axios API

2.11.1 axios 实例

2.11.2 请求配置

2.11.3 响应结构

2.11.4 默认配置

标签：Axios,const,url,Ajax,axios,Promise,result,document,data
From： https://www.cnblogs.com/iRuriCatt/p/18636389

相关文章

赞助商

阅读排行

Ajax入门以及Axios的详细使用（含Promise）

1. 概述

1.1 是什么

1.2 为什么

1.3 入门程序

2. axios

2.1 URL

2.2 数据提交

2.3 axios 错误处理

2.4 案例-用户登录

2.5 form-serialize 插件

2.6 Bootstrap 弹框

2.6.1 属性控制

2.6.2 js 控制

2.7 案例-图书管理

2.8 图片上传

2.9 案例-个人信息设置

2.10 请求方式别名

2.11 Axios API

2.11.1 axios 实例

2.11.2 请求配置

2.11.3 响应结构

2.11.4 默认配置

标签：Axios,const,url,Ajax,axios,Promise,result,document,data From： https://www.cnblogs.com/iRuriCatt/p/18636389

相关文章

赞助商

阅读排行

标签：Axios,const,url,Ajax,axios,Promise,result,document,data
From： https://www.cnblogs.com/iRuriCatt/p/18636389