文章目录
- 一、Ajax基础概念
- 1.服务器
- 2.请求&响应
- 2.1 请求
- 2.2 响应
- 3.请求方式
- 二、接口和接口文档
- 1.使用params,还是data:
- 三、Axios语法
- Ajax库介绍
- 1.语法:
- 2.请求方法的别名:
- 3.全局配置根路径
- 4.拦截器
- 四、FormData表单元素
- 1.组织表单提交行为
- 2.应用代码
- 3.FormData相关的API
- 4.上传文件
- 5.上传头像
一、Ajax基础概念
1.服务器
- 存储网络资源的一台电脑
- 数据：是存在于服务器的
2.请求&响应
2.1 请求
- 客户端向服务器要资源的过程
- 客户端向服务器提交资源的过程
- 通过URL地址，连接到服务器，广义上讲都叫做请求
- 请求是客户（客户端）发送的
2.2 响应
客户端发送了请求，服务器做出的回应，叫做响应
响应是服务器做出的
3.请求方式
不同的请求目的，对应着不同的请求方式
- 查询获取数据： GET
- 添加数据： POST
- 删除数据： DELETE
- 修改数据：
- PUT 侧重于完整的修改
- PATCH 侧重于部分修改
二、接口和接口文档
1.使用params,还是data:
看接口文档即可：
- 接口文档描述
Query参数或查询参数，使用params- 接口文档描述
body参数或请求体，使用data
三、Axios语法
Axios的语法是固定的，参考网站：https://www.axios-http.cn/
Ajax库介绍
官方网站：https://www.npmjs.com/package/axios
中文网站1：https://www.axios-http.cn/
中文网站2：http://www.axios-js.com/zh-cn/docs/
1.语法:
Axios({请求的配置}).then(result=>{})2.请求方法的别名:
GET和DELETE
axios.get(url,可选的配置对象)POST/PUT和PATCH
axios.post(url,data,可选的配置对象)3.全局配置根路径
axios.defaults.baseURL='根路径'4.拦截器
axios拦截器：https://www.axios-http.cn/docs/interceptors
四、FormData表单元素
FormData 是一个浏览器内置对象。作用是用于获取表单数据。
表单各项，必须有name属性
- let fd = new FormData(表单) // 可以把表单中的数据收集到了
- 单项按钮组，多个按钮，name属性要一致，才叫做一组
- 单项按钮、复选按钮，都要设置value值，提交数据的时候，提交的是value值
- 下拉框，name属性要给 select标签；value属性要给 option标签
<form action="">
单行文本框：
<input type="text" name="username"><br />
密码框：
<input type="password" name="pwd"><br />
单项按钮组：
<input type="radio" value="nan" name="sex">男
<input type="radio" value="nv" name="sex">女<br />
复选按钮组：
<input type="checkbox" name="hobby" value="cf">看书
<input type="checkbox" name="hobby" value="sj">美食
<input type="checkbox" name="hobby" value="ddd">旅行<Br />
下拉框：
<select name="address">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select><br />
文件选择框：
<input type="file"><br />
多行文本框：
<textarea name="intro" cols="30" rows="3"></textarea><br />
隐藏域：
<input type="hidden" name="id" value="100"><br />
<!-- h5新增：
<input type="color"> -->
<!-- 表单中的按钮 -->
<!-- 1.提交按钮（点击之后会造成表单提交） -->
<button id="tijiao">提交按钮1</button>
<button type="submit">提交按钮2</button>
<input type="submit" value="提交按钮3">
<hr>
<!-- 2.普通按钮（点击之后不会有任何反应） -->
<button type="button">普通按钮1</button>
<input type="button" value="普通按钮2">
<hr>
<!-- 3.重置按钮(点击之后，会重置表单) -->
<button type="reset">重置按钮1</button>
<input type="reset" value="重置按钮2">
</form>1.组织表单提交行为
两个方案：
<script src="./form-value.js"></script>
<script>
// 1. ------------- 点击按钮 ----------------------------------------
// document.querySelector('button').addEventListener('click', function (e) {
// e.preventDefault()
// })
// 2. --------------- 阻止表单提交行为 ----------------------------
document.querySelector('form').addEventListener('submit', function (e) {
e.preventDefault()
// 获取表单项的值
// 使用插件，获取表单项的值。
// 插件提供了 val() 方法，参数需要填form。
// val() 是根据表单各项的name属性获取值的，所以表单各项必须得有name
// let result = val(表单)
let result = val(document.querySelector('form'))
console.log(result)
})
</script>
- 在以后提交数据的时候，可以找到提交按钮，注册click事件；
- 也可以找到form，注册submit事件。
- 最终的效果是一样的。
2.应用代码
<body>
<form action="">
用户名：<input type="text" name="username"><br />
密 码：<input type="password" name="pwd"><br />
性 别：<input type="radio" value="男" name="sex">男 <input type="radio" value="女" name="sex">女<br />
<button>提交</button>
</form>
<script src="./lib/axios.js"></script>
<script>
axios.defaults.baseURL = 'http://www.xxx'
// 点击按钮，会造成表单提交，阻止默认行为，使用 FormData 收集表单数据,Ajax提交数据
document.querySelector('button').addEventListener('click', function (e) {
e.preventDefault() // 阻止默认行为
// let fd = new FormData(表单)
let fd = new FormData(document.querySelector('form'))
// ajax提交数据，也就是提交 fd
axios.post('/xxx/formdata', fd).then(result => {
console.log(result.data)
})
})
</script>
</body>3.FormData相关的API
-
fd.append('键', 值)向原有数据中，新增一个值 -
fd.delete('键')从原有数据中，移除一个值 -
fd.set('键', 值)修改原有数据中的一个值 -
fd.forEach((value, key) => {})变量查看对象中有哪些数据
axios.defaults.baseURL = 'http://www.xxx'
// 点击按钮，会造成表单提交，阻止默认行为，使用 FormData 收集表单数据,Ajax提交数据
document.querySelector('button').addEventListener('click', function (e) {
e.preventDefault() // 阻止默认行为
// let fd = new FormData(表单)
let fd = new FormData(document.querySelector('form'))
+ // 1. 向原有数据中，新增一个值
+ fd.append('phone', 1322323232)
+ // 2. 从原有数据中，删除一个值
+ fd.delete('pwd')
+ // 3. 修改一个值
+ fd.set('sex', '哈')
+ // 4. 提交前，查看有哪些数据
+ fd.forEach((value, key) => {
+ console.log(key, value)
+ })
// ajax提交数据，也就是提交 fd
axios.post('/xxx/formdata', fd).then(result => {
console.log(result.data)
})
})4.上传文件
原理和提交其他文本值一样，只不过上传，提交的是一个文件而已。注意，文件选择框，name 必须是 avatar，因为这是接口要求的。
<body>
<form action="">
用户名：<input type="text" name="username"><br />
密 码：<input type="password" name="pwd"><br />
性 别：<input type="radio" value="男" name="sex">男 <input type="radio" value="女" name="sex">女<br />
头 像：<input type="file" name="avatar"><br />
<button>提交</button>
</form>
<script src="./axios.js"></script>
<script>
axios.defaults.baseURL = 'http://www.xxx'
document.querySelector('button').addEventListener('click', function (e) {
e.preventDefault()
// 收集表单中的数据
let fd = new FormData(document.querySelector('form'))
// 提交数据（数据中包括文件，提交数据，就相当于上传文件）
axios.post('/xxx/formdata', fd).then(result => {
console.log(result.data)
})
})
</script>
</body>5.上传头像
给上传文件框，加name="avatar"
自己加一个
<form> </form>
let file = document.querySelector('#iptFile')
// 1. 点击普通按钮，能够选择图片
document.querySelector('#btnChoose').addEventListener('click', function (e) {
e.preventDefault()
file.click() // 用代码的方式，触发元素的单击事件（相当于点击了文件选择框）
})
// 2. 当文件选择框内容改变后，开始上传文件
file.addEventListener('change', function () {
// console.log(123)
let fd = new FormData(document.querySelector('form'))
axios.post('http://www.xxx', fd).then(result => {
// console.log(result.data)
// 上传后，把图片展示出来
document.querySelector('img').src = result.data.data.filename
})
})let file = document.querySelector('#iptFile')
// 1. 点击普通按钮，能够选择图片
document.querySelector('#btnChoose').addEventListener('click', function (e) {
e.preventDefault()
file.click() // 用代码的方式，触发元素的单击事件（相当于点击了文件选择框）
})
// 2. 当文件选择框内容改变后，开始上传文件
file.addEventListener('change', function () {
// console.log(123)
let fd = new FormData(document.querySelector('form'))
axios.post('http://www.xxx', fd).then(result => {
// console.log(result.data)
// 上传后，把图片展示出来
document.querySelector('img').src = result.data.data.filename
})
})
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
