02 Ajax表单提交
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
目录
一、表单概念
1.表单
2.提交的两种方式
二、form-serize与FormData
1.form-serize
2.FormData
三、文件上传案例分析
以下的既为本文的核心概括
一、表单概念
1.表单
form标签（表单）是用来收集用户输入的信息。
表单构成：
- 表单标签： form
- 表单域: input, checkbox, select ...
- 表单按钮
<button type="submit"></button>
2.提交的两种方式
1.表单自我提交
<!-- action: 接口的url地址 method: get或post，数据的提交方式（默认为GET） -->
<form action="提交地址" method="提交方式">
// 其他元素
</form>注意点：该提交方法会提交到指定地址并且会刷新整个网页的。靠的是method和action这两个属性
2.表单Ajax提交（案例参考下面的例子form-serize）
表单的默认提交效果不好（有页面刷新），我们直接用ajax的方式来提交。
要点：
- 给按钮添加点击事件的回调。
- 在回调函数中发请求
使用该方法不会存在整个页面提交的情况。
二、form-serize与FormData
1.form-serize
概念：能使用form-serialize插件, 提取整个表单数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语法_表单Ajax提交</title>
</head>
<body>
<form>
<div>
<!-- 用户名 -->
<span>用户名：</span>
<input type="text" name="username" id="username">
</div>
<div>
<!-- 密码： -->
<span>登录密码：</span>
<input type="password" name="password" id="password">
</div>
<div>
<!-- 提交按钮 给按钮补充id属性，方便dom获取-->
<button id="submit">提交</button>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
<script src="./lib/form-serialize.js"></script>
<script>
document.querySelector('#submit').addEventListener('click',(e)=>{
e.preventDefault()
let form = document.querySelector('form')
// { hash: true }加上了这个content-type { hash: true }的类型会变，具体的需要看后端需求
let formObj = serialize(form, { hash: true })
console.log(formObj);
axios({
url:'http://ajax-api.itheima.net/api/data',
method:'POST',
data:formObj
}).then(res =>{
console.log(res);
})
})
</script>
</body>
</html>格式：
- 格式1：
serialize(form标签)返回值是：查询字符串的格式 - 格式2：
serialize(form标签, { hash: true })返回值是： json对象
格式1： serialize(form标签)
格式2：serialize(form标签, { hash: true })
2.FormData
以键值对形式存放数据的容器, 常用于装载文件对象
FormData如何使用?（例子参考文件上传案例）
实例化一个对象，用它的append方法加入参数名和值
三、文件上传案例分析
整体思路是：
1.获取上传文件按钮
2.注册点击事件与改变事件
3.创建FormData容器
4.用Ajax获取的图片送到到服务器中
5.之后执行then操作获取成功之后：将图片的src值重新获取过来渲染到页面上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例_头像上传</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<style>
.thumb-box {
text-align: center;
margin-top: 50px;
}
.thumb {
width: 250px;
height: 250px;
object-fit: cover;
border-radius: 50%;
border: 5px solid black !important;
}
</style>
</head>
<body>
<div class="thumb-box">
<!-- 头像 -->
<label for="iptFile">
<img class="img-thumbnail thumb" src="./lib/images/cover.jpg">
</label>
<div class="mt-2">
<button id="btn">文件上传</button>
<input type="file" hidden id="iptFile" accept="image/*">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
<script>
/* 1.获取上传文件按钮
2.注册点击事件与改变事件
3.创建FormData容器
4.用Ajax获取传递的数据到服务器中
5.将图片的src值重新获取过来渲染到页面上*/
document.querySelector('#btn').addEventListener('click',()=>{
document.querySelector('#iptFile').click()
})
document.querySelector('#iptFile').addEventListener('change',(e)=>{
console.log(e);
// 获取到文件存储的位置之后用容器存起来
console.log(e.target.files[0]);
const fd =new FormData()
fd.append('avatar',e.target.files[0])
axios(
{
url:'http://ajax-api.itheima.net/api/file',
method:'POST',
data:fd
}
).then(res=>{
document.querySelector('img').src=res.data.data.url
console.log(res);
})
})
</script>
</body>
</html>注意点：
file文件可以存的文件不限于是img,FormData中存放的是文件的位置（图片），之后通过data传递到服务器上去。
传上去之后，正确了才会走then的操作，将数据与图片的src进行更换
（log打印的是文件/图片的存储位置）
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |