传递参数格式为form-data与json的区别,以及ajax、axios、fetch请求的方式

本文介绍了前端HTTP请求中form-data和json格式的区别,以及ajax、axios、fetch三种POST提交数据的方式。form-data常用于文件上传,而json格式更便于处理结构化数据。在实际应用中,根据需求选择合适的数据提交方式,并展示了如何在不同库中设置请求头和转换数据格式。
摘要由CSDN通过智能技术生成

一、form-data格式

在这里插入图片描述
请求头:

在这里插入图片描述

二、json格式

在这里插入图片描述
请求头:

在这里插入图片描述

三、四种常见的 POST 提交数据方式

1.application/x-www-form-urlencoded

表单格式提交数据,通过form标签的action属性,如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urlencoded 方式提交数据

html:

<form id="myform" onsubmit="return false;">
    用户名:<input type="text" id="username" name="username"/>
    密码:<input type="password" id="psw" name="psw"/><br/>
    <!-- 头像:<input type="file" name="head"></form> -->
    <div class="button">
        <button class="btn btn-primary"  id="register">注册</button>
    </div>
</form>

js:
在这里插入图片描述
jq:
在这里插入图片描述

在这里插入图片描述
首先,Content-Type 被指定为 application/x-www-form-urlencoded;其次,提交的数据按照 key1=val1&key2=val2 的方式进行编码,key 和 val 会进行URL 转码。

2.multipart/form-data(文件上传)

这也是一个常见的 POST 数据提交的方式。我们使用表单上传文件时,就要让 form 的 enctype 等于这个值。

在这里插入图片描述
首先生成了一个 boundary 用于分割不同的字段,为了避免与正文内容重复,boundary 很长很复杂。然后 Content-Type 里指明了数据是以 mutipart/form-data 来编码,本次请求的 boundary 是什么内容。消息主体里按照字段个数又分为多个结构类似的部分,每部分都是以 --boundary 开始,紧接着内容描述信息,然后是回车,最后是字段具体内容(文本或二进制)。如果传输的是文件,还要包含文件名和文件类型信息。消息主体最后以 --boundary-- 表示结束。

//js
document.getElementById("register")
  • 17
    点赞
  • 73
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值