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

浏览器几种常见的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 datacontentType: "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.mzph.cn/bicheng/7876.shtml

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

相关文章

【电路笔记】-容抗

容抗 文章目录 容抗1、概述2、容抗示例13、容抗示例 24、容抗示例 35、分压器修订6、总结1、概述 容抗是电容器的复阻抗,其值随应用频率而变化。 与不依赖于频率的电阻不同,在交流电路中,电抗受电源频率的影响,并且其行为方式与电阻类似,两者都以欧姆为单位测量。 电抗会…

win11 安装oracle11g详细流程及问题总结

1.安装包下载地址 本案例操作系统&#xff0c; Oracle 11g下载-Oracle 11g 64位/32位下载官方版(附详细的安装图解教程) - 多多软件站多多为大家免费提供Oracle 11g下载&#xff0c;包含64位/32位官方版本&#xff0c;并附详细的Oracle 11g安装图解教程&#xff0c;同时希望能…

深度学习之基于YOLOv5电线电缆目标检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 项目简介&#xff1a;深度学习之基于YOLOv5电线电缆目标检测系统 本项目旨在利用深度学习技术&#xff0c;特别是基…

Nginx全解:掌握高性能Web服务器的核心技巧和配置

Nginx是一个高性能的HTTP和反向代理服务器&#xff0c;也是一个IMAP/POP3/SMTP代理服务器。自从其首次发布以来&#xff0c;由于其轻量级以及高并发处理能力&#xff0c;Nginx已经成为越来越多企业和网站的首选。本文将深入探讨Nginx的主要功能及其配置方式&#xff0c;帮助你从…

算法训练营第62天|LeetCode 503.下一个更大元素II 42. 接雨水

LeetCode 503.下一个更大元素II 题目链接&#xff1a; LeetCode 503.下一个更大元素II 代码&#xff1a; class Solution { public:vector<int> nextGreaterElements(vector<int>& nums) {int size nums.size();stack<int>st;vector<int>resu…

如何搜索空文件夹_名称为(纯或含)中/英/数/符

首先&#xff0c;需要用到的这个工具&#xff1a; 度娘网盘 提取码&#xff1a;qwu2 蓝奏云 提取码&#xff1a;2r1z 打开工具&#xff0c;切换到批量文件复制版块&#xff0c;快捷键Ctrl5 点击右侧的搜索添加 设定要搜索的范围、指定为文件夹、包括子目录&#xff0c;勾选…

Day 26 数据库日志管理

数据库日志管理 一&#xff1a;日志管理 1.日志分类 ​ 错误日志 &#xff1a;启动&#xff0c;停止&#xff0c;关闭失败报错。rpm安装日志位置 /var/log/mysqld.log ​ 通用查询日志&#xff1a;所有的查询都记下来 ​ 二进制日志&#xff1a;实现备份&#xff0c;增量备份…

算法精讲:选择排序

基本思想 每一趟从待排序的数据元素中选出最小(或最大)的一个元素,顺序放在待排序的数列的最前端,直到所有元素排完。 排序过程 初始关键字:【3 1 5 4 2】 第一趟排序后:1【3 5 4 2】 第二趟排序后:1 2【5 4 3】 第三趟排序后:1 2 3【4 5】 最终结果:1 2 3 4 5…

*求问?:为何会超时(TLE)?

D - Grid and Magnet (atcoder.jp) 错误代码&#xff1a; //2024年5月5日14:53:43 #include <bits/stdc.h> #define move mmove //防止与头文件中重复 using namespace std; int h,w; string s[1000]; const int move[4][2]{{1,0},{-1,0},{0,1},{0,-1}}; bool used[100…

栈的实现以及c语言解决括号匹配问题

一、栈的实现 1、头文件 typedef int STDataType; typedef struct Stack {STDataType* _a;int _top; // 栈顶int _capacity; // 容量 }Stack; // 初始化栈 void StackInit(Stack* ps); // 入栈 void StackPush(Stack* ps, STDataType data); // 出栈 void StackPop(S…

GhostNetV2 Enhance Cheap Operation with Long-Range Attention 论文学习

论文地址&#xff1a;https://arxiv.org/abs/2211.12905 代码地址&#xff1a;https://github.com/huawei-noah/Efficient-AI-Backbones/tree/master/ghostnetv2_pytorch 解决了什么问题&#xff1f; 在计算机视觉领域&#xff0c;深度神经网络在诸多任务上扮演着重要角色。为…

设计模式-04 设计模式-Proxy Pattern 代理模式

设计模式-04 设计模式-Proxy Pattern 代理模式 1.定义 代理模式 为一个对象提供一个代理或占位符&#xff0c;以便控制对该对象的访问和操作。代理可以拦截并修改对目标对象的调用&#xff0c;从而实现以下目的&#xff1a; 控制访问&#xff1a;限制对敏感或昂贵对象的访问…

IP证书能免费申请吗

IP SSL证书是一种数字证书&#xff0c;用于保护网络服务器和网络浏览器之间的通信。该证书是一种主要保护公网IP地址的专属信任SSL证书。 IP类型的SSL证书对于直接用IP地址传输数据的技术人员来说&#xff0c;十分重要&#xff01;无论是防洪还是防劫持还是数据加密都起到了关…

QML进阶(十四) Model-View-Delegate视图框架

文章目录 数据模型(Model)C++数据模型XmlListModelRepeater模型视图框架(View)ListViewTableViewGridViewPathViewMVC(Model-View-Controller)模式将视图系统拆分为模型、视图、控制器三部分,每个部分都相对独立职责单一。模型(model)负责管理视图的数据并对外提供服务。视图(…

asp.net成绩查询系统

说明文档 运行前附加数据库.mdf&#xff08;或sql生成数据库&#xff09; 主要技术&#xff1a; 基于asp.net架构和sql server数据库 功能模块&#xff1a; asp.net成绩查询系统 学生功能有查看成绩和修改账号密码等 后台管理员可以进行用户管理 管理员添加管理员查询注…

重学计算机网络

一、应用层 1. http1.0 与 http2.0 的区别 有两点 1是持久化&#xff0c; 这个持久化并不是磁盘的持久化&#xff0c;而是tcp连接建立的持久化。 HTTP/1.0默认情况下使用短连接&#xff0c;即每个请求/响应都会关闭连接。这意味着每次请求都需要重新建立连接&#xff0c;增…

ADS基础教程10-多态性(动态模型选择)

目录 一、多态性定义二、操作步骤&#xff11;.模型建立&#xff12;.模型选择&#xff13;.执行仿真 一、多态性定义 ADS中支持一个Symbol中&#xff0c;可以同时存在多个子图。在仿真时可以动态选择不同的子图继续宁仿真。 二、操作步骤 &#xff11;.模型建立 在上一章A…

贪心算法应用例题

最优装载问题 #include <stdio.h> #include <algorithm>//排序int main() {int data[] { 8,20,5,80,3,420,14,330,70 };//物体重量int max 500;//船容最大总重量int count sizeof(data) / sizeof(data[0]);//物体数量std::sort(data, data count);//排序,排完数…

echarts tooltip 内容太多,超出范围显示不全问题,亲测有效

参考文章&#xff1a;echarts tooltip显示不全问题 在项目里面的tooltip数据特别多&#xff0c;显示不全问题&#xff08;有下面几种方法&#xff0c;选择最适合自己的&#xff09;&#xff1a; 1、如果盒子还够大&#xff0c;只是tooltip飘到上面或者下面被覆盖住了&#xff…

你用过最好用的AI工具有哪些?

你用过最好用的AI工具有哪些&#xff1f; 一、常用AI工具 当今人们在日常生活和工作中经常使用的AI工具包括&#xff1a; 智能语音助手&#xff08;如Siri、Google Assistant、Alexa&#xff09;&#xff1a;这些语音助手能够通过语音指令执行各种任务&#xff0c;如设置提醒…