前端往后端传递参数的方式有哪些?

文章目录

      • 1. URL 参数
        • 1.1. 查询参数(Query Parameters)
        • 1.2. 路径参数(Path Parameters)
      • 2. 请求体(Request Body)
        • 2.1. JSON 数据
        • 2.2. 表单数据
        • 2.3. 文件上传
      • 3. 请求头(Headers)
        • 3.1. 自定义请求头
      • 4. Cookie
      • 5. WebSocket 或其他协议
      • 总结

前端往后端传递参数的方式有多种,主要根据传递的上下文(如 URL、请求体、请求头等)以及所使用的 HTTP 方法来决定。

1. URL 参数

1.1. 查询参数(Query Parameters)
  • 定义
    • 通过 URL 的查询字符串传递参数。
    • 查询字符串的格式通常为 key=value,多个参数用 & 分隔。
  • 示例
    • URL: http://example.com/api/user?id=123&name=John
    • 后端获取参数:
      • 在 Java(Spring Boot)中:@RequestParam
        @GetMapping("/api/user")
        public ResponseEntity<User> getUser(@RequestParam("id") int id, @RequestParam("name") String name) {// 参数 id 和 name 会自动解析return ResponseEntity.ok(...);
        }
        
  • 特点
    • 参数是明文的,容易被看到。
    • 适合传递少量的、不敏感的数据,例如过滤条件、排序字段等。
1.2. 路径参数(Path Parameters)
  • 定义
    • 参数直接作为 URL 路径的一部分传递。
  • 示例
    • URL: http://example.com/api/user/123123 是路径参数)
    • 后端获取参数:
      • 在 Java(Spring Boot)中:@PathVariable
        @GetMapping("/api/user/{id}")
        public ResponseEntity<User> getUser(@PathVariable("id") int id) {// 参数 id 会自动解析return ResponseEntity.ok(...);
        }
        
  • 特点
    • 参数以路径的形式传递,直观且便于 RESTful API 的设计。
    • 常用于标识特定资源的参数(如 ID)。

2. 请求体(Request Body)

2.1. JSON 数据
  • 定义
    • 前端通过 JSON 格式的字符串将参数传递到后端,通常用于 POSTPUTPATCH 等请求方法。
  • 示例
    • 请求体内容(JSON):
      {"id": 123,"name": "John","email": "john@example.com"
      }
      
    • 前端发送:
      fetch('http://example.com/api/user', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({ id: 123, name: 'John', email: 'john@example.com' })
      });
      
    • 后端获取参数:
      • 在 Java(Spring Boot)中:@RequestBody
        @PostMapping("/api/user")
        public ResponseEntity<User> createUser(@RequestBody User user) {// 参数 user 会自动绑定return ResponseEntity.ok(...);
        }
        
  • 特点
    • 格式灵活,适合传递复杂的数据结构(如对象、数组等)。
    • 是现代前后端分离项目中最常用的方式之一。
2.2. 表单数据
  • 定义
    • 前端通过表单提交键值对形式的数据。
  • 示例
    • 表单形式:
      <form action="http://example.com/api/user" method="POST"><input type="text" name="name" value="John" /><input type="email" name="email" value="john@example.com" /><button type="submit">Submit</button>
      </form>
      
    • 前端使用 application/x-www-form-urlencoded
      const data = new URLSearchParams();
      data.append('name', 'John');
      data.append('email', 'john@example.com');fetch('http://example.com/api/user', {method: 'POST',headers: { 'Content-Type': 'application/x-www-form-urlencoded' },body: data.toString()
      });
      
    • 后端获取参数:
      • 在 Java(Spring Boot)中:@RequestParam@ModelAttribute
        @PostMapping("/api/user")
        public ResponseEntity<User> createUser(@RequestParam String name, @RequestParam String email) {// 参数 name 和 email 会自动解析return ResponseEntity.ok(...);
        }
        
  • 特点
    • 简单易用,但对于复杂的数据结构(如嵌套对象、数组)不适合。
    • 表单数据默认编码为 application/x-www-form-urlencoded
2.3. 文件上传
  • 定义
    • 通过 multipart/form-data 传递文件或其他表单数据。
  • 示例
    • 表单形式:
      <form action="http://example.com/api/upload" method="POST" enctype="multipart/form-data"><input type="file" name="file" /><button type="submit">Upload</button>
      </form>
      
    • 前端发送:
      const formData = new FormData();
      formData.append('file', fileInput.files[0]);fetch('http://example.com/api/upload', {method: 'POST',body: formData
      });
      
    • 后端获取参数:
      • 在 Java(Spring Boot)中:@RequestParamMultipartFile
        @PostMapping("/api/upload")
        public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) {// 获取文件内容return ResponseEntity.ok("File uploaded successfully!");
        }
        
  • 特点
    • 适合传递文件数据,支持文本、文件混合上传。
    • 表单需要设置 enctype="multipart/form-data"

3. 请求头(Headers)

3.1. 自定义请求头
  • 定义
    • 前端通过 HTTP 请求头传递参数。
  • 示例
    • 前端发送:
      fetch('http://example.com/api/user', {method: 'GET',headers: {'Authorization': 'Bearer token123','Custom-Header': 'CustomValue'}
      });
      
    • 后端获取参数:
      • 在 Java(Spring Boot)中:@RequestHeader
        @GetMapping("/api/user")
        public ResponseEntity<User> getUser(@RequestHeader("Authorization") String authToken) {// 参数 authToken 会自动解析return ResponseEntity.ok(...);
        }
        
  • 特点
    • 适合传递与请求相关的元数据,例如认证信息(Authorization)、客户端信息(User-Agent)等。
    • 不适合传递大数据量的参数。

4. Cookie

  • 定义
    • 参数存储在浏览器的 Cookie 中,前端通过设置 Cookie 传递给后端。
  • 示例
    • 前端设置 Cookie:
      document.cookie = "userId=123; path=/";
      
    • 后端获取参数:
      • 在 Java(Spring Boot)中:@CookieValue
        @GetMapping("/api/user")
        public ResponseEntity<User> getUser(@CookieValue("userId") String userId) {// 参数 userId 会自动解析return ResponseEntity.ok(...);
        }
        
  • 特点
    • 参数会自动附带在每次请求中(如果 Cookie 的域和路径匹配)。
    • 常用于存储用户会话信息。
    • 不适合存储敏感数据,需结合 HTTPS 和安全标志(HttpOnlySecure)。

5. WebSocket 或其他协议

  • 前端通过 WebSocket 或其他通信协议传递参数,适用于实时通信场景。
  • 示例:
    • WebSocket 通信:
      socket.send(JSON.stringify({ type: 'message', content: 'Hello' }));
      
    • 后端通过监听解析传递的消息。

总结

前端往后端传递参数的方式选择取决于具体的场景需求:

方式适用场景
URL 查询参数适合传递少量、不敏感的数据,如分页参数、搜索条件等。
URL 路径参数适合 RESTful API,用于标识特定资源(如用户 ID)。
JSON 请求体现代 Web 开发中最常用,适合传递复杂的数据结构。
表单数据简单表单提交,适合传递少量键值对。
文件上传文件和其他表单混合上传。
请求头传递元数据(如认证令牌、客户端信息)。
Cookie用户会话信息和状态保持。

根据实际需求选择合适的方式即可。

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

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

相关文章

记录媒体查询@media的用法

常见的PC分辨率 1024*500 &#xff08;8.9寸&#xff09; 1024*768 &#xff08;比例4&#xff1a;3 | 10.4寸、12.1寸、14.1寸、15寸; &#xff09; 1280*800&#xff08;16&#xff1a;10 |15.4寸&#xff09; 1280*1024(比例&#xff1a;5&#xff1a;4 | 14.1寸、15…

修复OpenHarmony系统相机应用横屏拍照按钮点不到的问题

适配OpenHarmony系统相机应用横屏UI&#xff0c; 相关pr: https://gitee.com/openharmony/applications_camera/pulls/233/files 适配效果 如何安装 编译好的hap提供在附件中 1.预置在源码&#xff0c;随固件安装 2.安装hap hdc shell "mount -o remount,rw /"…

debian系linux安装mysql

准备环境 (1) 先查询是否有安装mariadb,如果有&#xff0c;先执行以下命令卸载mariadb sudo apt-get remove --purge mariadb-server mariadb-client(2) 安装libncurses.so.5和libtinfo.so.5库文件 在数据库登录时会用到&#xff0c;执行以下命令查询 find / -type f -name …

10-Gin 文件上传 --[Gin 框架入门精讲与实战案例]

使用 Gin 框架处理文件上传是一个常见的任务&#xff0c;Gin 提供了简单而直观的方法来处理文件上传。下面将介绍如何用 Gin 实现文件上传功能。 1. 安装 Gin 如果你还没有安装 Gin&#xff0c;可以通过 Go 的包管理工具 go get 来安装&#xff1a; go get -u github.com/gi…

【react】常见的性能优化 1

目录 常见的 React 性能优化手段 1. 使用 useMemo 和 useCallback 缓存数据和函数 2. 使用 React.memo 缓存组件 3. 组件懒加载 4. 合理使用 key 5. 在组件销毁时清除定时器/事件 6. 使用 Suspense 和 Lazy 拆分组件 7. 使用 Fragment 避免额外标记 8. 避免使用内联函…

Promise实现原理解析,及实现方法。

Promise原理解析 Promise的介绍原理分析源码实现发布部分全部代码订阅部分基础代码简单发布订阅完整代码测试订阅能力链式调用的实现完整链式调用代码链式调用Promise完整功能代码 Promise的介绍 一&#xff0c;Promise的理解 在JavaScript中&#xff0c;Promise是一种用于处理…

http报头解析

http报文 http报文主要有两类是常见的&#xff0c;第一类是请求报文&#xff0c;第二类是响应报文&#xff0c;每个报头除了第一行&#xff0c;都是采用键值对进行传输数据&#xff0c;请求报文的第一行主要包括http方法&#xff08;GET&#xff0c;PUT&#xff0c; POST&#…

【日常开发】Git Stash使用技巧

文章目录 引言一、git stash 基础命令&#xff08;一&#xff09;存储当前工作区的修改&#xff08;二&#xff09;查看存储列表 二、查看存储的内容&#xff08;一&#xff09;查看特定存储的详细内容&#xff08;二&#xff09;查看特定存储修改的文件列表 三、恢复存储的修改…

微服务保护-sentinel

为什么要有微服务保护&#xff1f; 微服务保护是为了避免微服务雪崩而出现的&#xff0c;每个微服务能处理的请求是有限的&#xff0c;如果一个微服务出现问题导致一个请求进入微服务的时间太久&#xff0c;就会导致大量去请求停滞在微服务内部&#xff0c;这样就会过分占用系统…

【Redis】Redis 典型应用 - 缓存 (cache)

目录 1. 什么是缓存 2. 使用 Redis 作为缓存 3. 缓存的更新策略 3.1 定期生成 3.2 实时生成 4. 缓存的淘汰策略 5. 缓存预热, 缓存穿透, 缓存雪崩 和 缓存击穿 关于缓存预热 (Cache preheating) 关于缓存穿透 (Cache penetration) 关于缓存雪崩 (Cache avalanche) 关…

关于easy-es对时间范围查询遇到的小bug

前言&#xff1a;在使用easy-es之前作为一个小白的我只有es原生查询的基础&#xff0c;在自己通过查看官方文档自学easy-es遇到了一个挫折&#xff0c;其他的还好语法和MybatisPlus差不多&#xff0c;正以为我觉得很快就能入手&#xff0c;在对时间范围的判断就给我当头一棒&am…

Python读取TIF文件

在Python中&#xff0c;逐帧读取TIFF文件&#xff08;尤其是多页TIFF文件&#xff09;可以使用tifffile库或Pillow库。以下是两种方法的示例&#xff1a; 方法 1&#xff1a;使用 tifffile 逐帧读取 tifffile 是一个专门用于处理TIFF文件的库&#xff0c;支持多页TIFF文件的逐…

只谈C++11新特性 - 显式转换函数

显式转换函数 背景与问题 在 C11 之前&#xff0c;explicit 关键字只能用于构造函数。其作用是阻止构造函数在需要隐式转换时被调用。例如&#xff1a; 示例问题&#xff08;C11 之前的 explicit 用法&#xff09; #include <iostream>class Example { public:explic…

从0到机器视觉工程师(一):机器视觉工业相机总结

目录 相机的作用 工业相机 工业相机的优点 工业相机的种类 工业相机知名品牌 光源与打光 打光方式 亮暗场照明 亮暗场照明的应用 亮暗场照明的区别 前向光漫射照明 背光照明 背光照明的原理 背光照明的应用 同轴光照明 同轴光照明的应用 总结 相机的作用 相机…

HTML——53. 创建表单

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>创建表单</title></head><body><!--form标签用于创建一个表单&#xff0c;会将里面的内容一起发送服务器&#xff0c;其结构类似于表格--><!--表…

逐行讲解大模型流式输出 streamer 源码

目录 简介TextStreamer 基础流式输出TextIterateStreamer 迭代器流式输出本地代码模型加载并前端展示streamlit 输出显示gradio 输出显示 vllm 部署模型并前端展示streamlit 输出显示gradio 输出显示 备注 简介 本文详细讲解了大模型流式输出的源码实现&#xff0c;包括TextSt…

java_使用阿里云oss服务存储图片

什么情况下可以使用阿里云oss服务存储图片&#xff1f; 对图片的访问速度有高要求时使用&#xff0c;方便用户快速的&#xff08;比如在网页页面中&#xff09;访问到图像 参考&#xff1a;41 尚上优选项目-平台管理端-商品信息管理模块-阿里云OSS介绍_哔哩哔哩_bilibili 1.…

第5章 共享内存范式:C语言层面

5.1OpenMP 5.1.1OpenMP的介绍 OpenMP三个原则 5.2OpenMP的使用 编译制导指令以#pragma omp 开始&#xff0c;后边跟具体的功能指令&#xff0c;格式如:#pragma omp 指令[子句[,子句].]。常用的功能指令如下: 5.2.1编译制导 5.2.2API和环境变量 具体案例-邻接矩阵 // 本代码…

全国青少年信息学奥林匹克竞赛(信奥赛)备考实战之循环结构(for循环语句)(七)

实战训练—鸡兔同笼 问题描述&#xff1a; 一个笼子里面关了鸡和兔子&#xff08;鸡有2只脚&#xff0c;兔子有4只脚&#xff0c;没有例外&#xff09;。已经知道了笼子里面脚的总数为a&#xff0c;问笼子里面至少有多少只动物&#xff0c;至多有多少只动物。 输入格式&…

web 开发全局覆盖文件上传身份验证漏洞利用

全局覆盖 首先认识全局变量和局部变量 再一个就是知道全局变量是全局使用的并且有个特点就是可以覆盖 这个就是全局变量我们输出一下发现 z居然等于函数内的计算值 把我们原来定义的全局变量 $z给覆盖了 看一下局部变量 这个时候 z就不会被覆盖 <?php $x1; $y2; …