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

<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>