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

最新推荐文章于 2025-05-22 16:17:46 发布
原创 最新推荐文章于 2025-05-22 16:17:46 发布 · 3.3k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#post #cors #put #patch #axios

本文介绍了前端通过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 之外的所有字符。

21、前端数据集成与可视化及后端GraphQL API构建
lilh34434的博客
07-30 7
本文详细介绍了如何在前端使用Victory库实现数据可视化，包括柱状图和折线图的创建，以及如何在后端构建灵活的GraphQL API。同时探讨了GraphQL相较于REST的优势、应用场景及其高级功能如突变（Mutations），并提供了前后端交互的优化策略，如缓存机制和错误处理。最后展望了GraphQL和数据可视化技术的未来发展趋势。
21、前端数据集成与可视化及后端 GraphQL API 搭建
最新发布
sony5的博客
07-29 7
本文详细介绍了如何在前端使用 Victory 库进行数据可视化，包括创建柱状图和折线图，并讲解了如何在后端搭建 GraphQL API，涵盖基本查询、突变的实现以及高级概念如片段、指令和订阅。通过这些技术，可以提升数据展示效果和 API 的灵活性。
前端发起请求，后端响应请求的整个过程
热门推荐
puhuihui的博客
08-11 1万+
本文分为：前端、后端两部分讲诉。以下是前端发送请求到服务器，服务器响应前端，的整个过程的图解：
前端请求接口，只传入已修改字段值的字段
SupperSA的博客
11-29 1378
在实际开发中前端肯定会遇到一个更新需求，回显数据 => 修改数据 => 请求更新接口这个步骤。通常建议前端仅传递发生更改的字段，而不是将所有字段都传递给后端。
Axios中POST、PUT、PATCH用法区别
BillKu的博客
05-22 1583
在 Axios 中，POSTPUT和PATCH是用于发送 HTTP 请求的三种不同方法，它们的核心区别源自 HTTP 协议的设计语义。
前端页面传参后端接收
鹤
12-18 1036
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 852
1：查询字符串（Query String）：在URL中使用?符号将参数附加到URL末尾，多个参数之间使用&符号分隔。from表单把所有属于表单中的内容提交给后台，例如输入框，单选框，多选框，文本域，文件域等。将参数直接作为URL的一部分，一般用于表示资源的唯一标识符或路径参数。
【nodejs】使用put方式向后端提交数据
weixin_33842328的博客
04-10 2896
页面代码： <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>Put data to db&lt
前端调用后端接口时，HTTP协议提供了多种请求方式
weixin_60631847的博客
07-15 690
GET请求用于请求服务器发送资源。POST请求的数据不会附加在URL之后，而是作为请求体（body）发送给服务器。：PUT请求用于向服务器上传资源或更新资源。如果指定的资源不存在，服务器可能会根据请求创建新的资源；它主要用于CORS（跨源资源共享）预检请求，以检查实际请求是否可以被服务器接受。与PUT请求不同，PATCH请求只包含需要修改的资源字段，而不是整个资源。：HEAD请求与GET请求类似，但它只请求资源的响应头，而不请求资源本身的内容。：DELETE请求用于请求服务器删除指定的资源。
python接收前端post数据_python接收axios的post请求，并处理后返回数据
weixin_39929687的博客
12-22 2062
公司的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允许前端开发者在不依赖实际后端数据的...
http接口通用调试工具，支持get、post、put、patch、delete方法
07-06
http接口通用调试工具，支持get、post、put、patch、delete方法，数据的发送和接收使用json格式，即Content-Type: application/json
103.(前端)分类管理增加属性——向后端发送post请求添加参数
m0_63953077的博客
10-31 721
向后端发送post请求添加参数
前端之 ajax 的get put用法
helldoger的博客
02-19 476
使用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 898
有时，我们需要自定义或修改前端的格式或内容。 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 719
前端的请求方式和数据类型（content-type）， post & get
POST，PUT和PATCH的区别
qq_40511157的博客
06-30 5697
POST和PUT的区别容易被简单地误认为“POST表示创建资源，PUT表示更新资源.但实际上两者都可以用来创建或是更新数据.单从技术上来说,他们并没有什么区别.但是在HTTP规范中POST是非等幂的,多次调用会产生不同的结果,比如:创建一个用户,由于网络原因或是其他原因多创建了几次,那么将会有多个用户被创建.而PUT id/456则会创建一个id为456的用户,多次调用还是会创建的结果是一样的,所以PUT是等幂的. PATCH一般是用来局部更新资源的,假设我们有一个UserInfo，里面有userId， u
POST,PUT,PATCH的区别
weixin_30487701的博客
07-05 737
如果你对HTTP的POST，PUT，PATCH方法之间的区别不是很明朗，那么这篇文章应该能帮到你 首先解释一下“幂等”的概念：在编程中一个 “幂等” 操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同 POST方法： POST方法是用来创建一个新的数据的 POST方法不是幂等的，意味着他的结果不会是相同的，重复进行POST方法会导致多条相同的数据被创建 虽然多次执行结果不是相同...
Axios请求方法及别名（post方法，put方法和patch方法）
Argent_
09-05 6233
<template> <div class="axios"></div> </template> <script> import axios from 'axios' export default { name: 'axios2-2', components: { }, created() { /* ...
前端如何给后端传参
07-05
根据引用[1]和引用[2]，前端向后端传递参数有几种常见方式，包括通过URL拼接（GET请求）、表单提交（POST请求）、JSON数据（POST请求）等。以下将详细说明这些方法，并给出示例。 ### 1. 通过URL拼接参数（GET请求...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值