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

langziangTom

2024-04-09 帮助1人

请求体类型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标签) 返回值是：查询字符串的格式

学新通

当我们需要的上传的数据类型是json对象时,应该使用

格式2： serialize(form标签, { hash: true }) 返回值是： json对象

学新通

这篇好文章是转载于：学新通技术网

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

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开