form表单提交
表单的三部分组成
-
HTML的就是表单标签，它是一个容器，用来将页面上指定区域规定为表单区域
-
表单域提供采集用户信息的渠道，常见的的表单域有,、、等
- 每个单域表单必须包含name熟悉，否则用户填写的信息无法被采集
-
表单按钮当表单数据填写完毕后，用户点击表单按钮，会触发的提交操作，从而把采集到的提交给服务器
- type = “submit” 表示提价按钮的意思
- type 属性的默认值就是submit ，因此type=“submit”可以省略
| 属性 | 可选 | 说明 |
|---|---|---|
| action | 接口url | 把表单采集到的数据，提交到那个接口 |
| method | GET或POST | 数据的提交方式（默认是GET） |
| enctype | applitirt | 数据的编码格式，具体是指：表单提交给服务器钱，如何对将要进行提交的数据进行编码 |
以GET方式提交数据表单
- method：默认是get
<body>
<form action="提交地址" method="get" ech>
<span>用户名：</span>
<input type="text" name="urername" />
<br />
<span>密码 </span>
<input type="" name="pwd" />
<button>提交</button>
</form>
以POST方式提交表单
<!-- enctype 默认是：application/x-www-form-urlencoded -->
<form action="请求地址" method="post">
<span>用户名：</span>
<input type="text" name="urername" />
<br />
<span>密码 </span>
<input type="" name="pwd" />
<button>提交</button>
</form>
上传文件的请求
<form action="请求地址" method="post" enctype="multipart/form-data">
<span>用户名：</span>
<input type="text" name="urername" />
<br />
<span>密码 </span>
<input type="" name="pwd" />
<button>提交</button>
enctype两个可选值之间的区别
-
只有method属性的值等于POST，才必须设置enctype属性，它的属性可选值有两个
属性名 是否常用 应用场景 apploication/x-www-from - urlencoded 是 表单中不包含上传文件的场景 multipart/form-data 是 表单中包含上传文件的场景
提交数据的弊端
- 要发生页面跳转
- 用户体验感差
解决方案
- 负责收集数据
- Ajax负责提交数据
Ajax提交表单
const form = document.querySelector("form")
// 监听submit事件
form.addEventListener('submit',function(e){
// 阻止表单的默认行为
e.preventDefault();
// 提交Ajax数据
axios({
method:'piost',
url:'地址',
data: {
username:document.querySelector('.name').vlaue,
pwd:document.querySelector('.pwd').vlaue,
},
}).then(res=>{
console.log(res);
})
})
- 简化开发者使用过程，axios为所有支持者提供请求别名
全局请求根路径设置
-
提供维护性
axios.defaults.baseURl = "请求根路径";
axios拦截器
-
拦截器：用来全局拦截axios的每一次请求与响应
- 好处：可以把每个请求中，某些重复性的业务代码封装到拦截器中，提高代码复用性
\
