前端 POST/PUT/PATCH 给后端的数据方式

最新推荐文章于 2025-03-17 19:37:11 发布
最新推荐文章于 2025-03-17 19:37:11 发布
阅读量3.3k 收藏 2
点赞数 1
分类专栏： web前端 文章标签： post cors put patch axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xianghongai/article/details/98250976
版权
本文介绍了前端通过POST、PUT、PATCH三种方式向后端提交数据，包括原生form的键值对提交、文件的二进制上传以及JSON数据的传递。JSON方式会触发HTTP CORS机制，需要后端处理跨域问题。同时，讨论了URI中字符编码的重要性以及相关编码函数的使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前端 POST/PUT/PATCH 给后端的数据，主要有三类数据方式：

1、application/ x-www-form-urlencoded
2、multipart/form-data
3、application/json

第 1 类，原生 form 默认的提交方式，所有表单(扁平)数据会被处理成键值对形式(key1=value1&key2=value2)发送给后端，其中 key/value 字符前端需要通过 encodeURIComponent 转码，后端接收后需要解码，不建议前端直接发送和后端直接接收使用，前后端要进行字符编码处理；

第 2 类，好理解，用于提交文件，将其处理成二进制数据提交给后端；

第 3 类，传递 JSON 给后端，适合传递结构复杂的数据对象，这种方式，会触发 HTTP CORS 机制，会有两次请求：

  • i. 浏览器首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求，
  • ii. 需要后端解决跨域问题，允许前端该跨域请求，浏览器发起实际请求；

前端 GET 后端数据，Query 部分数据，如，api.xxx.com/search/type?key1=value1&key2=value2，其中 key/value 部分字符同样需要进行编码处理，同上。

做这些事目的，是为了处理 URI 中具有特殊含义的保留字符（reserved character）

ECMAScript Percent-encoding

  • encodeURIComponent(str),

    Not Escaped: A-Z a-z 0-9 - _ . ! ~ * ' ( )

    即，encodeURIComponent 转义除了上述 Not Escaped 之外的所有字符。

常用的前端4种请求方式
紫水木鱼的博客
01-14 1686
主要针对于GET和POST请求：GET拼接url，POST传递body，get限制字符串长度请求缓存：GET 会被缓存，而post不会，原因是get是url的请求保留浏览器历史记录：GET可以，而POST不能，原因是get的url请求用处：get常用于取回数据，post用于提交数据安全性：post比get安全，是因为post是请求体，不会在url上被劫持！请求参数：querystring是url的一部分get、post都可以带上。
前端调用后端接口时，HTTP协议提供了多种请求方式
weixin_60631847的博客
07-15 611
GET请求用于请求服务器发送资源。POST请求的数据不会附加在URL之后，而是作为请求体（body）发送给服务器。：PUT请求用于向服务器上传资源或更新资源。如果指定的资源不存在，服务器可能会根据请求创建新的资源；它主要用于CORS（跨源资源共享）预检请求，以检查实际请求是否可以被服务器接受。与PUT请求不同，PATCH请求只包含需要修改的资源字段，而不是整个资源。：HEAD请求与GET请求类似，但它只请求资源的响应头，而不请求资源本身的内容。：DELETE请求用于请求服务器删除指定的资源。
关于前后端传参的几种方式
weixin_53451858的博客
08-31 2595
有些后端的小伙伴可能会因为接不到参数而苦恼，在方法运行的时候会造成空指针等异常，整理了一下集中接参的方式，废话不多说，直接上代码。
在vue项目中，使用Patch请求，实现根据id修改某张发票的日结状态
最新发布
qq_63981644的博客
03-17 1270
这是我们在vue项目中，发送一个patch请求的例子，我们要好好了解这一块。喜欢本篇文章的话，可以留个免费的关注~~
http接口通用调试工具，支持get、post、put、patch、delete方法
07-06
http接口通用调试工具，支持get、post、put、patch、delete方法，数据的发送和接收使用json格式，即Content-Type: application/json
前端请求patch接口，只传入已修改字段值的字段
SupperSA的博客
11-29 1299
在实际开发中前端肯定会遇到一个更新需求，回显数据 => 修改数据 => 请求更新接口这个步骤。通常建议前端仅传递发生更改的字段，而不是将所有字段都传递给后端。
前端页面传参后端接收
鹤
12-18 920
Post请求提交的参数类型 我自己常遇到的： Content-Type：multipart/form-data（用于在表单中上传文件） Content-Type：application/x-www-form-urlencoded（浏览器原生的form表单类型，不能上传文件） Content-Type：application/json（以json形式进行传输，通常是传输对象时使用）不常遇到的： Content-Type：application/xml Content-Type：application/java
前端向后端传输数据的方法
Derlii的博客
07-18 781
1：查询字符串（Query String）：在URL中使用?符号将参数附加到URL末尾，多个参数之间使用&符号分隔。from表单把所有属于表单中的内容提交给后台，例如输入框，单选框，多选框，文本域，文件域等。将参数直接作为URL的一部分，一般用于表示资源的唯一标识符或路径参数。
【nodejs】使用put方式向后端提交数据
weixin_33842328的博客
04-10 2884
页面代码： <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>Put data to db&lt
python接收前端post数据_python接收axios的post请求，并处理后返回数据
weixin_39929687的博客
12-22 2044
公司的python工程师不会js和python数据交互，所以我就去试了一下。首先安装python，django框架和django-cors-headers。python官网下载，按提示操作，记住最后勾选add to path。django和django-cors-headers可以用命令下载。pip install django和pip install django-cors-headersdja...
Vue使用json-server进行后端数据模拟功能
10-18
它支持CORS和JSONP跨域请求，支持标准的REST API方法（GET, POST, PUT, PATCH, DELETE）以及一系列查询方法，例如limit（限制返回的数据量）和order（数据排序）。json-server允许前端开发者在不依赖实际后端数据的...
【API接口设计】：前端与PHP后端数据交互的5种方法
[【API接口设计】：前端与PHP后端数据交互的5种方法](https://josipmisko.com/img/patch-vs-put/paypal-patch-example.webp) # 摘要 本文综合介绍了API接口设计的关键技术和实践方法。首先，概述了API接口设计的...
103.(前端)分类管理增加属性——向后端发送post请求添加参数
m0_63953077的博客
10-31 695
向后端发送post请求添加参数
前端发起请求，后端响应请求的整个过程
热门推荐
puhuihui的博客
08-11 1万+
本文分为：前端、后端两部分讲诉。以下是前端发送请求到服务器，服务器响应前端，的整个过程的图解：
前端之 ajax 的get put用法
helldoger的博客
02-19 463
使用express 建立一个后端的程序: const express = require('express'); //2 创建应用对象 const app = express(); //3创建路由规则 // request对请求报文的封装 response 对响应报文的封装 app.get('/server', (request, response)=>{ //设置响应头 response.setHeader('Access-Control-Allow-Origin', '*');
odoo 前端 patch（补丁）用法
weixin_44565926的博客
05-26 855
有时，我们需要自定义或修改前端的格式或内容。 Odoo 提供了实用功能patch。 描述： 代码见：@web/core/utils/patch: 用法： patch(obj, patchName, patchValue, options) Arguments obj (Object) – object that should be patched patchName (string) – unique string describing the patch patchValue (Object) – a
前端的请求分析（get,post,put,delete,patch）
qq_33404590的博客
09-19 700
前端的请求方式和数据类型（content-type）， post & get
POST，PUT和PATCH的区别
qq_40511157的博客
06-30 5640
POST和PUT的区别容易被简单地误认为“POST表示创建资源，PUT表示更新资源.但实际上两者都可以用来创建或是更新数据.单从技术上来说,他们并没有什么区别.但是在HTTP规范中POST是非等幂的,多次调用会产生不同的结果,比如:创建一个用户,由于网络原因或是其他原因多创建了几次,那么将会有多个用户被创建.而PUT id/456则会创建一个id为456的用户,多次调用还是会创建的结果是一样的,所以PUT是等幂的. PATCH一般是用来局部更新资源的,假设我们有一个UserInfo，里面有userId， u
POST,PUT,PATCH的区别
weixin_30487701的博客
07-05 716
如果你对HTTP的POST，PUT，PATCH方法之间的区别不是很明朗，那么这篇文章应该能帮到你 首先解释一下“幂等”的概念：在编程中一个 “幂等” 操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同 POST方法： POST方法是用来创建一个新的数据的 POST方法不是幂等的，意味着他的结果不会是相同的，重复进行POST方法会导致多条相同的数据被创建 虽然多次执行结果不是相同...
怎么处理前端表单数据传递到后端？
10-06
处理前端表单数据传递到后端通常涉及以下几个步骤： 1. **HTML 表单提交**: 在HTML中，使用`<form>`标签将表单数据封装起来。设置`action`属性为后端API的URL，`method`属性为"POST"（对于提交新的数据）或"PUT/PATCH"（如果更新已有数据），同时设置`enctype`为"application/x-www-form-urlencoded" 或 "multipart/form-data" 根据表单是否含有文件上传。 ```html <form action="/api/register" method="post" enctype="application/x-www-form-urlencoded"> <input type="text" name="username" /> <input type="password" name="password" /> <!-- 其他字段... --> <button type="submit">注册</button> </form> ``` 2. **发送数据**: 使用JavaScript的`fetch()`或`axios`等库发起HTTP请求。当用户点击提交按钮时，获取表单内的值，然后将其作为`FormData`对象或直接作为查询字符串（`application/x-www-form-urlencoded`）发送到服务器。 ```javascript const form = document.querySelector('form'); form.addEventListener('submit', (event) => { event.preventDefault(); // 防止默认提交行为 const formData = new FormData(form); // 对于包含文件的表单 // 或者 formData.append('username', document.querySelector('#username').value); fetch('/api/register', { method: 'POST', body: formData, headers: { 'Content-Type': 'multipart/form-data' } // 或者 application/x-www-form-urlencoded }) .then(response => response.json()) .then(data => console.log(data)); // 处理服务器响应 }); ``` 3. **后端接收数据**: 在Spring Boot的控制器中，使用`@PostMapping`来处理接收到的POST请求。可以使用`org.springframework.web.bind.annotation.RequestParam`或`org.springframework.web.bind.annotation.FormHttpBinding`来映射前端传来的数据。 ```java @PostMapping("/register") public ResponseEntity<?> register(@RequestParam("username") String username, @RequestParam("password") String password) { // 这里的用户名和密码是前端POST过来的 } ``` **相关问题--:** 1. 如何在Spring Boot中验证接收到的表单数据？ 2. 如果表单数据需要加密，如何在前端和后端分别处理？ 3. 如何处理前端Ajax请求失败的情况？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值