ajax请求体的3种常用类型和场景(1)

请求头Con t ent-Ty pe类型请求体值格式
1. application/x–www–form–urlencode d 参数名=值&参数名=值的字符串
2. application/json ‘{“参数名”: 值, “参数名”: 值} 的json 字符串
3. multipart/form–data FormData 表单数据(常用携带文件)

值得注意的是,三种请求体的数据上传,是需要用到三种不同的方式,其中第一种(查询字符串)和第二种(json 对象)方式相似,需要用到语法 form–serialize,而第三种(文件数据)上传则需使用语法 _Fo rmData

这里先来简单说说form–serialize 表单整体的获取

我们可以使用 form–serialize 插件,获取整个表单数据

一定要先引入 form–serialize.js 工具
写js 代码。直接调用 serialize 方法
注意代码格式如下:
格式1： serialize(form标签) 返回值是：查询字符串的格式
格式2： serialize(form标签, { hash: true }) 返回值是： json 对象
注意点:需要获取数据的表单内部标签,里面应该加上name 属性!

<body&gt;
    <form id="form"&gt;
        <div&gt;
            <!-- 用户名 --&gt;
            <span>用户名：</span>
            <input type="text" name="username">
        </div>
        <div>
            <!-- 密码： -->
            <span>登录密码：</span>
            <input type="password" name="password">
        </div>
        <div>
            <!-- 提交按钮 -->
            <button id="submit">提交</button>
        </div>
    </form>
    <script>
        document.querySelector('#submit').addEventListener('click',(e)=>{
            e.preventDefault()
            const p = serialize(document.querySelector('form'), { hash: true })
            console.log(p);
            axios({
                url:'http://ajax-api.itheima.net/api/data',
                method:'POST',
                data:p
            }).then(res=>{
               console.log(res.data.data);
            })
        })
    </script>
</body>