请求:浏览器向服务器发送请求  响应:服务器根据请求的内容 给出对应的数据

请求体类型 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', '小马');