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

最新推荐文章于 2024-04-28 00:13:34 发布

langziangTom

最新推荐文章于 2024-04-28 00:13:34 发布

阅读量482

点赞数 1

文章标签： ajax json java

本文链接：https://blog.csdn.net/langziangTom/article/details/127835741

版权

请求体类型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 表单整体的获取

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

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

<body>
    <form id="form">
        <div>
            <!-- 用户名 -->
            <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>

当我们需要的上传的数据类型是查询字符串时,应该使用

格式1： serialize(form标签) 返回值是：查询字符串的格式