什么是form表单
在网页中，表单主要负责数据采集功能。
表单的三个组成部分
网页中采集数据的表单由三个部分组成，表单标签、表单域、表单按钮。
表单标签
HTML 的form是一个“容器”，用来将页面上指定的区域划定为表单区域
表单域
表单域提供了采集用户信息的渠道，常见的表单域有：input、textarea、select 等
注意：每个表单域必须包含 name 属性，否则用户填写的信息无法被采集到！
表单按钮
当表单数据填写完毕后，用户点击表单按钮，会触发表单的提交操作，从而把采集到的数据提交给服务器。
注意：
①type="submit" 表示提交按钮的意思
②type 属性的默认值就是submit，因此 type="submit" 可以省略不写
form标签的属性
form标签最重要的 3 个属性分别是 action、method 和 enctype。
以GET方式提交表单数据
在form标签上，通过action属性指定提交的 URL 地址，通过 method属性指定提交的方式为GET
注意：由于 method 属性的默认值就是 GET，因此上述的 method="GET" 可以被省略！
<form action="http://www.liulongbin.top:3009/api/form" method="get">
姓名: <input type="text" name="username"><br>
密码: <input type="password" name="password"><br>
<button type="submit">提交</button>
</form>以POST方式提交表单数据
在form标签上，通过 action 属性指定提交的 URL 地址，通过 method属性指定提交的方式为 POST，并通过 enctype 属性指定数据的编码方式为 application/x-www-form-urlencoded
注意：由于 enctype 的默认值就是 application/x-www-form-urlencoded，因此上述的 enctype 可以被省略！
<form action="http://www.liulongbin.top:3009/api/form" method="post" enctype="application/x-www-form-urlencoded">
姓名: <input type="text" name="username"><br>
密码: <input type="password" name="password"><br>
<button type="submit">提交</button>
</form>enctype三个可选值之间的区别
form表单提交的问题
1. 产生问题的原因：
form表单身兼数职：既负责采集数据，又负责把数据提交到服务器。表单的默认提交行为会导致页面的跳转。
2. 解决方案：
form表单只负责采集数据；Ajax 负责将数据提交到服务器。
通过Ajax提交表单数据
通过 Ajax 提交表单采集到的数据，可以防止表单默认提交行为导致的页面跳转问题，提高用户的体验。
<body>
<form action="">
姓名: <input type="text" name="username"><br>
密码: <input type="password" name="password"><br>
<button type="submit">提交</button>
</form>
<script src="./lib/jquery.js"></script>
<script src="./lib/axios.js"></script>
<script>
// 1.监听表单的提交事件
$('form').on('submit', function (e) {
// 2.组织事件的提交行为
e.preventDefault()
// 3.ajax提交数据,form不用提交数据.好处:页面不会发生跳转
axios({
// 4.指定请求方式和请求地址
method: 'post',
url: 'http://www.liulongbin.top:3009/api/form',
// 5.指定请求体数据
data: {
username: $('[name="username"]').val(),
password: $('[name="password"]').val()
},
}).then(({data: res}) => {
console.log(res)
})
})
</script>
</body>jQuery的serialize()函数
jQuery 的 serialize() 函数能够一次性获取到表单中采集的数据
注意点:在使用 serialize() 函数快速获取表单数据时，必须为每个表单域添加 name 属性！
<body>
<form action="">
姓名: <input type="text" name="username"><br>
密码: <input type="password" name="password"><br>
<button type="submit">提交</button>
</form>
<script src="./lib/jquery.js"></script>
<script src="./lib/axios.js"></script>
<script>
$('form').on('submit', function (e) {
e.preventDefault()
axios({
method: 'post',
url: 'http://www.liulongbin.top:3009/api/form',
data: $(this).serialize()
}).then(({data: res}) => {
console.log(res)
})
})
</script>
</body>axios 请求方法的别名
axios.get()的用法
<body>
<button>get请求不带参数</button>
<button>get请求带参数</button>
<!-- 1.引入axios.js库 -->
<script src="./lib/axios.js"></script>
<script src="./lib/jquery.js"></script>
<script>
// axios get(地址) 发送请求
$('button').eq(0).click(function () {
axios.get('http://www.liulongbin.top:3009/api/get').then(({
data: res
}) => {
console.log(res)
})
})
// axios get(地址,{params:值}) 发送请求带参数
$('button').eq(1).click(function () {
axios.get('http://www.liulongbin.top:3009/api/get', {
params: {
name: 'jack',
age: 18
}
}).then(({
data: res
}) => {
console.log(res)
})
})
</script>
</body>axios.post()的用法
<body>
<button>post请求不带参数</button>
<button>post请求带参数</button>
<!-- 1.引入axios.js库 -->
<script src="./lib/axios.js"></script>
<script src="./lib/jquery.js"></script>
<script>
// axios post(地址) 发送请求
$('button').eq(0).click(function () {
axios.post('http://www.liulongbin.top:3009/api/post').then(({
data: res
}) => {
console.log(res)
})
})
// axios post(地址,参数值) 发送请求带参数
$('button').eq(1).click(function () {
axios.post('http://www.liulongbin.top:3009/api/post', {
name: 'jack',
age: 18
}).then(({
data: res
}) => {
console.log(res)
})
})
</script>
</body>全局配置请求根路径
在 url 地址中，协议://域名:端口 对应的部分叫做“请求根路径”。
全局配置请求根路径的好处：提高项目的可维护性
基于 axios 提供的固定配置，即可轻松配置请求的根路径。语法格式如下：axios.defaults.baseURL = '请求根路径'
<body>
<button>get请求不带参数</button>
<button>get请求带参数</button>
<!-- 1.引入axios.js库 -->
<script src="./lib/axios.js"></script>
<script src="./lib/jquery.js"></script>
<script>
// 设置全局的请求根路径(baseURL中的URL全部是大写)
axios.defaults.baseURL = 'http://www.liulongbin.top:3009'
// 调用接口时,只提供"具体的请求路径"即可
$('button').eq(0).click(function () {
axios.get('/api/get').then((res) => {
console.log(res)
})
})
// 调用接口时,只提供"具体的请求路径"即可
$('button').eq(1).click(function () {
axios.post('/api/post', {
name: 'jack',
age: 18
}).then((res) => {
console.log(res)
})
})
</script>
</body>axios 拦截器
什么是拦截器
拦截器（interceptors）用来全局拦截 axios 的每一次请求与响应。
好处：可以把每个请求中，某些重复性的业务代码封装到拦截器中，提高代码的复用性。
使用拦截器-实现loading效果
// 请求拦截
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
// 展示 loading 效果
$('.loading-box').show()
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
// 响应拦截
axios.interceptors.response.use(function (response) {
// 在响应数据做些什么
// 隐藏 loading 效果
$('.loading-box').hide()
return response
}, function (error) {
// 对响应错误做些什么
// 隐藏 loading 效果
$('.loading-box').hide()
return Promise.reject(error)
})文件上传
FormData
概念：FormData 是浏览器提供的一个 WebAPI，它以键值对的方式存储数据。
作用：FormData 配合 Ajax 技术，能够向服务器发送 multipart/form-data 格式的请求体数据。
典型应用场景：FormData + Ajax 技术实现文件上传的功能。
注意：Ajax 实现文件上传的时候，请求体的编码格式必须是 multipart/form-data。
FormData的基本用法
FormData是一个构造函数，new FormData()即可得到FormData对象：
let fd = new FormData() // 创建一个空白的 FormData 对象，里面没有包含任何数据。 let fd = new FormData(表单对象)
调用FormData对象的append(键, 值)方法，可以向空白的FormData中追加键值对数据，其中：
键表示数据项的名字，必须是字符串
值表示数据项的值，可以是任意类型的数据
fd.append('username', '张三') // 键是 username，值是字符串类型
fd.append('age', 20) // 键是 age，值是数字类型
fd.append('avatar', 图片文件) // 键是 avatar，值是文件类型
发送普通的FormData数据
FormData + axios 向服务器提交普通的数据（不包含文件上传）
<body>
<button>发送</button>
<script src="./lib/axios.js"></script>
<script>
document.querySelector('button').onclick = function () {
// 1.创建一个空白的 FormData 对象,里面没有包含任何数据
let fd = new FormData()
// 2.向 fd 中追加数据
fd.append('username', 'jack')
fd.append('age', 18)
// 3.使用 axios 把FormData 格式的请求体数据,提交到服务器
axios.post('http://www.liulongbin.top:3009/api/formdata',fd).then((data: res)=>{
console.log(res)
})
}
</script>
</body>
