请求:浏览器向服务器发送请求 响应:服务器根据请求的内容 给出对应的数据
请求体类型 content-type 它就是告诉服务器本次请求体中的数据是什么类型
在哪里看请求体类型?:Headers---respons Headers---content-type
请求报文---请求头中的content-type
作业:用来标记请求体内容的类型
请求头Content-Type类型 请求体值格式
1. application/x-www-form-urlencoded 参数名=值&参数名=值 的字符串
2. application/json '{"参数名": 值, "参数名": 值} 的json字符串
3. multipart/form-data FormData表单数据(常用携带文件)
需要注意的是:三种请求体的数据上传需要用到三种不同的方式,其中第一种(查询字符串)和第二种(json字符串形式的对象)方式相似,需要先引入form-serialize插件,再整体获取表单数据,发送请求,而第三种(文件数据)上传则需使用语法_FormData
使用form-serialize插件 可以完成表单数据的整体获取
1 引入form-serialize.js
2 写js代码 直接调用serialize方法
3 代码格式:
- 格式1:
serialize(form标签)
返回值是:查询字符串的格式 - 格式2:
serialize(form标签, { hash: true })
返回值是: json对象
注意:这里要整体获取表单数据,先获取表单标签 ,此时表单内部标签要全部加上name属性!这样才能整体获取
第三种数据类型(文件对象)的上传方法使用FormData语法
1.实例化一个对象 const fd = new FormData
2.用它的append方法加入参数名和值
serialize(form标签)
// 返回值: 参数名=值&参数名=值
// 例如: 'username=admin&password=123456'
serialize(form标签, { hash: true })
// 返回值: { 参数名: 值, 参数名: 值 }
// 例如: { username: 'admin', password: '123456' }
// 参数名: 指的就是表单域name属性的值(也是后端要使用的参数名)
当我们需要的上传的数据类型是查询字符串时,应该使用
格式1: serialize(form标签)
返回值是:查询字符串的格式
当我们需要的上传的数据类型是json对象时,应该使用
格式2: serialize(form标签, { hash: true })
返回值是: json对象
当我们需要的上传的数据类型是FormData时,应该用的方法如下 new一个FormData对象
// 1. 创建一个FormData对象
let fd = new FormData()
// 2. 向对象中添加 数据
// FormData.append(属性名, 属性值)
// 示例:
fd.append('name', '小马');