js浏览器请求,post请求中的参数形式和form-data提交数据时数据格式问题(2024-05-06)

news2024/9/25 9:39:35

浏览器几种常见的post请求方式

Content-Type 属性规定在发送到服务器之前应该如何对表单数据进行编码。
默认表单数据会编码为 "application/x-www-form-urlencoded"

post请求的参数一般放在Body里。

Content-Type(内容类型),一般是指网页中存在的 Content-Type,用于定义网络文件的类型和网页的编码,决定浏览器将以什么形式、什么编码读取这个文件,这就是经常看到一些 PHP 网页点击的结果却是下载一个文件或一张图片的原因。

Content-Type 标头告诉客户端实际返回的内容的内容类型。

 

(1)HTTP 协议是以 ASCII 码 传输,建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分:状态行、请求头、消息主体。
(2)协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须 使用什么编码方式 。开发者完全可以自己决定消息主体的格式,只要最后发送的 HTTP 请求满足上面的格式就可以。
(3)数据发送出去,还要服务端解析成功才有意义。一般服务端语言如 php、python 等,以及它们的 framework,都内置了自动解析常见数据格式的功能。服务端通常是根据请求头(headers)中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码,再对主体进行解析。


1、application/x-www-form-urlencoded 

最常见的 POST 提交数据的方式。浏览器的原生 <form> 表单,如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urlencoded 方式提交数据。

application/x-www-form-urlencoded方式也是post请求最早支持的一种数据传输方式,这种也是key和value形式,将我们的参数类似于GET方式那样拼接成一个字符串,例如:key1=value1&key2=value2,这种形式,然后将这个参数字符串进行urlencode编码,放到Body里进行发送请求数据。

<form action="form_action.asp" enctype="text/plain">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>


//Content-Type: application/x-www-form-urlencoded;charset=utf-8
//title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

 Content-Type 被指定为 application/x-www-form-urlencoded;其次,提交的数据按照 key1=val1&key2=val2 的方式进行编码,key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式很好的支持,常用的如jQuery中的ajax请求,Content-Type 默认值都是「application/x-www-form-urlencoded;charset=utf-8

jq的Ajax写法

function getOrigantAjaxPost() {
    let stringData = 'name=value1&pwd=value2'
    $.ajax({
        data: stringData,
        async: true,
        url: 'http://hostName:9000/entity/urlReq',
        type: "post",
        processData: false,  //tell jQuery not to process the data
        contentType: "application/x-www-form-urlencoded",
        success: function (data, status) {
            console.log("Data: " + JSON.stringify(data) + "  " + status);
        },
        error: function (e) {
            console.log('error ' + JSON.stringify(e));
        }
    });
}

2、multipart/form-data

这也是常见的post请求方式,一般用来上传文件,各大服务器的支持也比较好。所以我们使用表单上传文件时,必须让<form>表单的enctype属性值为 multipart/form-data。

它会将表单的数据处理为一条消息,以标签为单元,用分隔符分开。既可以上传键值对,也可以上传文件。
由于有boundary隔离,所以multipart/form-data既可以上传文件,也可以上传键值对,它采用了键值对的方式,所以可以上传多个文件,在springmvc中可以使用MultipartHttpServletRequest接收通过api根据"name"获取不同的键值,也可以通过MulTipartFile数组接收多个文件

3、application/json

application/json作为响应头并不陌生,实际上,现在很多时候也把它作为请求头,用来告诉服务端消息主体是序列化的JSON字符串,除了低版本的IE,基本都支持。除了低版本的IE都支持JSON.stringify()的方法,服务端也有处理JSON的函数,使用json不会有任何麻烦。

// 请求数据
let data = {name:'sara',sex:'girl'};
// 请求数据序列化处理
JSON.stingify(data);

//结果:{'name':'sara','sex':'girl'};

4、text/plain,text/html

text/html的意思是将文件的content-type设置为text/html的形式,浏览器在获取到这种文件时会自动调用html的解析器对文件进行相应的处理。

text/plain的意思是将文件设置为纯文本的形式,浏览器在获取到这种文件时并不会对其进行处理。

5、raw

可以上传任意格式的文本,可以上传text、json、xml、html等Controller接口可以通过@RequestBody 来修饰,传入数据就是JSON格式

注意: 在使用raw 方式,如果在PostMan再测试的时候需要在headers中添加一个key-value (Content-Type: application/json 或者对应的格式)

6、binary

相当于Content-Type:application/octet-stream,从字面意思得知,只可以上传二进制数据,通常用来上传文件,由于没有键值,所以,一次只能上传一个文件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1644637.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

论文精读-存内计算芯片研究进展及应用

文章目录 论文精读-存内计算芯片研究进展及应用概述背景介绍前人工作 存内计算3.1 SRAM存内计算3.2 DRAM存内计算3.3 ReRAM/PCM存内计算3.4 MRAM存内计算3.5 NOR Flash存内计算3.6 基于其他介质的存内计算3.7 存内计算芯片应用场景 总结QA 论文精读-存内计算芯片研究进展及应用…

“A”分心得:我的云计算HCIE学习之路

大家好&#xff0c;我是誉天云计算HCIE周末班梁同学&#xff0c;在誉天老师和同学们的帮助下&#xff0c;我终于在4月24日顺利通过了云计算3.0 HCIE的认证考试&#xff0c;而且获得了A&#xff0c;这是让我特别惊喜的&#xff0c;功夫不负有心人。 我日常的工作是网络运维&…

Merck:mPAGE® Lux SDS-PAGE制胶系统

相对于传统SDS-PAGE制胶工艺&#xff0c;Merck公司的mPAGE Lux制胶系统是一种更快速、简单、安全的替代方法&#xff0c;可实现更具可重现性的结果。mPAGE Lux制胶系统可在90秒内完成小型凝胶固化&#xff0c;而传统方法则需要90分钟以上。该系统采用紫外线照射快速制胶工作流程…

Activity工作流基本知识点

1.概念 工作流(Workflow)&#xff0c;就是“业务过程的部分或整体在计算机应用环境下的自动化”&#xff0c;它主要解决的是“使在多个参与者之间按照某种预定义的规则传递文档、信息或任务的过程自动进行&#xff0c;从而实现某个预期的业务目标&#xff0c;或者促使此目标的…

java:File类概述和构造方法

一、File类概述和构造方法 1.File类的概述 File&#xff1a;它是文件和目录路径名的抽象表示 文件和目录是可以通过File封装成对象的对File而言&#xff0c;其封装并不是一个真正存在的文件&#xff0c;仅仅是一个路径名而已。它可以是存在的&#xff0c;也可以是不存在的。…

flink sql 优化

文章目录 一、参数方面二、资源方面三、总结 提示&#xff1a;实时flink sql 参考很多网上方法与自己实践方法汇总(版本:flink1.13) 一、参数方面 flink sql参数配置 //关闭详细算子链(默认为true),true后job性能会略微有提升。false则可以展示更详细的DAG图方便地位性能结点…

Xshell生成ssh密钥及使用

目录 1. 概述2. 环境3. 步骤3.1 生成密钥3.2 部署密钥3.3 使用密钥 1. 概述 使用Xshell软件生成ssh秘钥&#xff0c;正常连接服务器。 2. 环境 Xshell 6 3. 步骤 3.1 生成密钥 1. 打开Xshell --> 工具 --> 新建用户密钥生成向导 2. 选择密钥类型&#xff0c;建议…

如何更好的使用cpm

nvidia发布了RAFT库&#xff0c;支持向量数据库的底层计算优化&#xff0c;RAFT 也使用CMake Package Manager( CPM )和rapids-cmake管理项目&#xff0c;可以方便快捷的下载到需要的对应版本的thirdparty的依赖库&#xff0c;但是&#xff0c;一般情况下&#xff0c;项目是直接…

c++11 标准模板(STL)本地化库 - 平面类别(std::num_get) - 从输入字符序列中解析数字值

本地化库 本地环境设施包含字符分类和字符串校对、数值、货币及日期/时间格式化和分析&#xff0c;以及消息取得的国际化支持。本地环境设置控制流 I/O 、正则表达式库和 C 标准库的其他组件的行为。 平面类别 从输入字符序列中解析数字值 std::num_get template< cl…

【Python时序预测系列】粒子群算法(PSO)优化LSTM实现单变量时间序列预测(案例+源码)

这是我的第272篇原创文章。 一、引言 粒子群算法&#xff08;Particle Swarm Optimization, PSO&#xff09;是一种启发式优化算法&#xff0c;可以用于优化神经网络模型的参数。在优化长短期记忆网络&#xff08;Long Short-Term Memory, LSTM&#xff09;时&#xff0c;可以结…

JetPack之ViewModel+LiveData

目录 一、概述二、LiveData 使用2.1 创建 LiveData 对象2.2 观察 LiveData 对象2.3 更新 LiveData 对象 三、编写 LiveData Demo3.1 不使用 LiveData3.2 使用 MutableLiveData3.3 使用 MediatorLiveData3.3.1 监听 2 个数据源的变化3.3.2 编写模拟 2 个数据源更新的代码 四、Vi…

4月威胁态势 | 0day占比82%!Polyransom勒索家族强势来袭

近日&#xff0c;亚信安全正式发布《2024年4月威胁态势报告》&#xff08;以下简称“报告”&#xff09;&#xff0c;报告显示&#xff0c;4月份新增安全漏洞1260个&#xff0c;涉及0day漏洞占82%&#xff1b;监测发现当前较活跃的勒索病毒家族是Polyransom和Blocker&#xff0…

FIFO Generate IP核使用——Native接口时读写宽度不一致详解

表3-4显示了在选择了Native接口时哪些时钟类型支持非对称的宽高比&#xff0c;即读写宽度不一致。 非对称的宽高比允许FIFO的输入和输出宽度不同。FIFO支持以下写-读宽高比&#xff08;Write-to-Read Aspect Ratios&#xff09;&#xff1a;1:8, 1:4, 1:2, 1:1, 2:1, 4:1, 8:1…

【数据分析】这些年我发过的微信朋友圈

TencentRecordAnalysisV1.0.3.zip 蓝奏云&#xff1a;链接:链接TencentRecordAnalysis (lanzoub.com)密码:9hww 朋友圈还是以本行业岩土、工作相关的内容居多。 对于一个不怎么发圈的人来说&#xff0c;这几天有点反常&#xff0c;这几天大概是我成功的开发了几个失败的GPT应用…

C++:set和map的介绍

目录 关联式容器 键值对 set介绍&#xff1a; set的模板参数列表 set的双向迭代器&#xff1a; insert的使用和set的特性&#xff1a; set的删除&#xff1a; set的find&#xff1a; lower_bound 、 upper_bound&#xff1a; multiset&#xff1a; map介绍&#xff…

机器学习-K近邻算法(KNN)

目录 什么是KNN算法 图解KNN基本算法 &#xff08;1&#xff09;k近邻算法中k的选取 &#xff08;2&#xff09;距离函数 &#xff08;3&#xff09;归一化处理 &#xff08;4&#xff09;概率kNN KNN算法的优缺点 优势 缺点 KNN算法总结 什么是KNN算法 k近邻算法&…

MySQL-集群的高可用

MMM: Multi-Master Replication Manager for MySQL&#xff0c;Mysql主主复制管理器是一套灵活的脚本程序&#xff0c;基于perl实现&#xff0c;用来对mysql replication进行监控和故障迁移&#xff0c;并能管理mysql Master-Master复制的配置(同一时间只有一个节点是可写的) …

成功者的8个时间管理技巧,让你在职场中脱颖而出

在职场中&#xff0c;高效的时间管理不仅能帮助你完成更多工作&#xff0c;还能提升你的工作效率和工作质量。以下是八个时间管理技巧&#xff1a; 一、明确职业目标&#xff0c;设定优先级 明确自己的职业目标&#xff0c;并根据这些目标设定工作任务的优先级。这有助于你专…

HTML5实现酷炫个人产品推广、工具推广、信息推广、个人主页、个人介绍、酷炫官网、门户网站模板源码

文章目录 1.设计来源1.1 主界面1.2 我的产品界面1.3 关于我们界面1.4 照片墙界面1.5 发展历程界面1.6 优秀人才界面1.7 热门产品界面1.8 联系我们界面 2.灵活调整模块3.效果和源码3.1 动态效果3.2 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.c…