三、form表单 和 文件上传

IsIand
736 阅读10分钟

三、form表单 和 文件上传

（一）form表单

1、表单的作用：采集数据

2、表单的三个组成部分：表单标签、表单域、表单按钮

（1）表单标签：HTML的<form>就是表单标签，它是一个“容器”，用来将页面上指定的区域划定为表单区域：

image_0_e22HPH4a.png

image_0_e22HPH4a.png

（2）表单域：表单域提供了采集用户信息的渠道，常见的表单域有: input 、textarea 、 select 等

image_n3aCGzw8IJ.png

（3）表单按钮：当表单数据填写完毕后，用户点击表单按钮，还会触发表单的提交操作，从而把采集到的数据提交给服务器

image_oNJgTgrYjE.png

3、把表单采集到的数据提交给服务器时，需要指定请求的方式与请求的URL地址

4、<form>标签的属性一览表

<form>标签最重要的3个属性分别是 action、method、enctype

属性可选值说明
action接口的url地址把表单采集到的数据，提交到哪个接口中
methodget 或 post数据的提交方式（默认值为get)
enctypeapplication/x-www-form-urlencoded multipart/form-data数据的编码格式。具体指的是： 把表单数据提交给服务器之前，如何对将要提交的数据进行编码（默认值 application/x-www-form-urlencoded）

注意：enctype 属性只能搭配 post 提交方式一起使用；如果是get 提交，则enctype 没有意义！

5、以 GET 方式提交表单数据

在<form>标签上，通过action属性指定提交的URL地址，通过method属性指定提交的方式为GET：

image_Juay-Y7sWg.png

注意：由于method 属性的默认值就是GET，因此上述的 method="GET" 可以被省略

6、以POST方式提交表单数据

在<form>标签上，通过action属性指定提交的URL地址，通过method属性指定提交的方式为POST，并通过enctype属性指定数据的编码方式为 application/x-www-form-urlencoded

image_LOYc6nB-xR.png

注意：由于enctype的默认值就是 application/x-www-form-urlencoded ，因此上述的 enctype 可以被省略

7、表单提交的问题

1）产生问题的原因：<form>表单身兼数职：既负责采集数据，又负责吧数据提交到服务器，表单的默认提交行为会导致页面的跳转

2）解决方案：

  • <form>表单只负责采集数据

  • Ajax负责将数据提交到服务器。（符合：职能单一的原则）

8、通过Ajax提交表单数据

作用：通过Ajax提交表单采集到的数据，可以防止表单的默认提交行为导致的页面跳转问题，提到用户的体验。

① 监听表单的 submit 提交事件

② 阻止默认提交行为

③ 基于 axios 发起请求

④ 指定请求方式、请求地址

⑤ 指定请求体数据

image_EVVOdkGCts.png

9、jQuery的 serialize( )函数

jQuery 的 serialize( ) 函数能够一次性获取到表单中采集的数据，它的语法格式如下：$('表单元素的选择器').serialize

image_wK7NMS6tKM.png

10、serialize( )函数的使用注意点

在使用serialize( )函数快速获取表单数据时，必须为每个表单域添加 name 属性

image_yYqJx4decy.png

11、serialize( )函数的其他特点

1）该方法是jQuery封装的，使用时必须引入jQuery 2）使用serialize()，各表单域必须有 name 属性 3）使用该方法得到的结果是一个查询字符串结构：name=value&name=value 4）该方法 能够 获取 隐藏域的值 5）该方法不能得到禁用状态的值 6）该方法不能得到文件域中的文件信息，所以不能完成文件上传

（二）axios请求方式的别名

1、常用的5种请求方式：GET、POST、PUT、PATCH、DELETE

1) axios.get(url[, config])

2) axios.delete(url[, config])

3) axios.post(url[, data[, config]])

4) axios.put(url[, data[, config]])

5) axios.patch(url[, data[, config]])

2、简化方法的参数

image_LQJ5cKkTiW.png

3、 axios.get( )的用法

image_E6bQsVBt0Q.png

4、 axios.( )的用法

image_qdTbrmb6OK.png

（三）axios全局配置 和 拦截器

1、全局配置请求根路径

1）在 url 地址中，协议://域名:端口 对应的部分叫做“请求根路径”。

2）全局配置请求根路径的好处：

  • ① 提高项目的可维护性。全局配置根路径后，后续所有的请求都可以使用全局配置的根路径 假设：端口号从 3009 变成了 3006

  • ② 没有全局配置根路径，则每个请求的URL中的端口号都需要被修改！

  • ③ 有全局配置根路径，则只需要修改全局配置即可

3）全局配置请求根路径 - - 语法格式

image_o0oq2A6a8X.png

2、拦截器：

1）拦截器

  • ① 拦截器（interceptors）用来全局拦截 axios 的 每一次请求与响应。

  • ② 好处：可以把每个请求中，某些 重复性的业务代码封装到拦截器中，提高代码的复用性

image_Oa62oh2MVT.png

2）不使用拦截器 - 实现 loading 效果

image_Qy5H_O2is4.png

3）使用拦截器 - 实现 loading 效果

  • ① 在请求拦截器中展示 loading 效果：

image_YqydwcHqL8.png

  • ②在响应拦截器中隐藏 loading 效果：

image_DBqU_cuy-Q.png

（四）FormData和文件上传

1、FormData介绍

1）FormData 是一个浏览器对象。用于管理表单数据。

2）IE10+支持。

3）可以这样理解，FormData的作用和 jQuery中的 serialize() 作用一样，用于快速收集表单数据

4）并且可以将创建的FormData对象直接提交给接口。

5）典型应用场景：FormData + Ajax 技术实现文件上传的功能。

2、FormData基本使用方法

① 假设需要收集 <form>……</form> 里面的所有表单项的值

② 要求，每个表单元素都具有 name 属性

image_a_xjpmb_j_.png

注意事项:提交FormData 对象，不能使用GET方式，具体以接口文档为准

3、FormData的API方法

在提交数据前，可以使用下列API方法对数据进行查看和修改

image_MqQMzj9Ol9.png

4、FormData 和 serialize的区别

① 共同点：

  • 都需要设置表单各项的name属性。

  • 都能快速收集表单数据

  • 都能够获取到隐藏域（<input type="hidden" />）的值

  • 都不能获取禁用状态（disabled）的值

②不同点：

  • FormData属于原生的代码；serialiaze是jQuery封装的方法

  • FormData可以收集文件域（<input type="file"/>）的值，而serialize不能。如果有文件上传，则必须使用FormData。

  • 得到的结果的数据类型不一样（知道即可）

（五）文件域补充

1、文件域：<input type="file" />

1）accept属性：控制能够选择的文件类型，比如 accept="image/png,image/jpeg"

2）multiple 属性：控制是否可以多选文件

2、文件对象

1） 面向对象中，讲过，JS中表示一个人，需要用到对象。

2）JS中表示一个文件，也需要用对象，也就是文件对象

3）文件对象，是本地文件的一个表示。

4） 通俗的说，在 JavaScript 中，使用 文件对象 表示一个本地文件。

5） 文件对象不需要自己创建，可以通过文件域获取得到

  • 选择一个或多个文件

  • 根据文件域，找到它的 files 属性。files属性是一个伪数组，里面包含了一个或多个文件对象。

6）取得文件对象

image_UMu4esu1Qr.png

3、文件对象的作用之一

1）本地预览

image_czBkHMUzjc.png

4、文件对象的作用之二

1）追加到FormData，实现文件上传

image_baF9hPVcHe.png

（六）请求报文 & 响应报文

1、什么是请求报文和响应报文

客户端与服务器通信的过程是基于请求与响应的：

  • 请求报文规定了客户端以什么格式把数据发送给服务器

  • 响应报文规定了服务器以什么格式吧数据响应给客户端

2、请求报文—格式

1）请求报文由请求行（request line）、请求头部（ header ）、空行 和 请求体 4 个部分组成。图示如下：

image_TRy2be75EX.png

2）注意：

  • 在浏览器中，GET 请求比较特殊，它只有请求头，没有请求体。

  • 在浏览器中，POST、PUT、PATCH、DELETE 请求既有请求头，又有请求体。

3、响应报文—格式

1）响应报文由状态行、响应头部、空行 和 响应体 4 个部分组成。图示如下：

image_cWSGWmfsLN.png

4、URL参数

1）常用的5种请求方式，都可以在URL后面携带请求参数。

2）由于URL的长度有限制，所以请求参数一般都比较小，比如不能做文件上传

3）常用的请求参数有两种写法

  • /api/xxx? ?参数=值&参数=值 （这种格式的字符串叫做查询字符串，所以这样的参数叫做查询参数）

image_0h-VOunE5g.png

  • /api/xxx/值/值 （Restful 风格的接口用这种格式的参数）

image_2kRfn1_t4j.png

5、请求体

1）除URL请求以外，其他4种常用的请求方式，都可以设置请求体

2）请求体的大小没有限制，所以可以提交大量的数据

3）常用的请求体格式有以下三种

  • 参数=值&参数=值 （查询字符串格式）

  • '{"id"=1,"name":"张三"}' （JSON格式）

  • new ForData( ) (FormData对象格式）

4）axios中，如何设置不同格式的请求体

  • 第一种格式：参数=值&参数=值

    // axios.post的第二个参数，直接用查询字符串
axios.post('/api/xxx', 'key=value&key=value')

  • 第二种格式：'{"id"=1,"name":"zs"}'

    // axios.post的第二个参数，使用对象。axios会将它转成JSON格式
axios.post('/api/xxx', { id: 1, name: 'zs' })

  • 第三种格式： new ForData( )

    let fd = new FormData();
// axios.post的第二个参数，直接使用 FormData 对象
axios.post('/api/formdata', fd)

5）请求的时候，设置了不同格式的请求体，需要一个对应的请求头

  • 第一种格式参数=值&参数=值 （查询字符串格式）

     Content-Type: application/x-www-form-urlencoded

  • '{"id"=1,"name":"张三"}' （JSON格式）

     Content-Type: application/json

  • new ForData( ) (FormData对象格式）

     Content-Type: multipart/form-data; xxsd随机字符

6、http响应状态码

1）概念：http响应状态码（Status Code)由三位数字组成，用来标识响应成功与否的状态

2）作用：客户端浏览器根据响应状态码，即可判断出这次http请求是否成功。

image_L-f2jwn3wS.png

7、常见的http响应状态码

状态码状态码描述说明
200OK请求成功
201Created资源在服务器端已成功创建
304Not Modified资源在客户端被缓存，响应体中不包含任何资源内容
400Bod Request客户端的请求方式或请求参数有误导致的请求失败
401Unauthorized客户端的用户身份认证未通过，导致此次请求失败
404Not Found客户端请求的资源地址错误。导致服务器无法找到资源
500Internal Server Error服务器内部错误，导致的本次请求失败

8、http响应状态码 Vs 业务状态码

1）所处的位置不同

  • 在响应头的状态行中所包含的状态码，或者请求列表中的Status，叫做“响应状态码”

image_PcGpsRZl-N.png

  • 在响应体的数据中包含的状态码（案例中叫做code），叫做“业务状态码”

image_RhhCHdyGxA.png

2）表示的结果不同

  • 响应状态码只能表示这次请求的成功与否

  • 业务状态码用来表示这次业务处理的成功与否

3）通用性不同

  • 响应状态码是由http协议规定的，具有通用性。每个不同的状态码都有其标准的含义，不能乱用

image_4gE-xkj4ap.png

  • 业务状态码是后端程序员自定义的，不具有通用性

image_-d5PTzlMIy.png

avatar
文章
阅读
粉丝