前后端交互时,后端通过api(url)获取数据时,一定要注意的点(encode编码)

在通过甲方提供的api获取json数据时,我们一般首先会通过以下步骤来进行测试:

  1. 使用postman来进行测试
  2. Postman测试通过后,在项目里写好方法用swagger或者直接在浏览器上访问测试
  3. 通过测试

平时我们请求类似于:

http://localhost:8080/xxxx/xxxxx/xxxxx/xxxxx/%E7%84%A6%E9%A1%B56-2HF

http://localhost:8080/xxxx/xxxxx/xxxxx/xxxxx?xxxx=%E7%84%A6%E9%A1%B56-2HF

如同以上形式的地址,我们按照常规操作一般是不会出现问题的,但是当请求地址出现这种形式:

http://xxx/getData?jh=xxx&username=admin&startTime=2020-09-01 14:36:02&endTime=2020-12-01 14:36:02

这时我们就可能会遇到一些犯错点:

  1. 请求的参数名前后不能打空格,否则可能会出现以下错误

  2. 请求的参数值同样不能直接打空格,否则会出现以下错误
    在这里插入图片描述

  3. 上述请求地址中带空格的参数是时间,但是时间我们规定了必须以这个时间来取,我们如果直接把中间的空格删了,程序不会报错,但只会给我们返回空值,这时我们可以采取以下策略:
    在这里插入图片描述
    针对需要的参数用URLEncoder进行处理,再把地址拼接起来,就不会出现前面所说的问题了,注意是针对参数进行处理,不是把整个URL进行处理。

<think>好的,用户现在问的是前后端数据输的方式,这个问题看起来是要了解前后端通信的基本机制。之前用户已经问过关于返回URL和文件流的区别,以及是否需要拼接字节流的问题,现在可能是在进一步深入理解数据输的整体流程。 首先,我需要回顾一下前后端输数据的常见方式。通常有几种方法,比如表单提交、AJAX、WebSocket、SSE等。用户可能对这些方法的具体实现和适用场景不太清楚,需要逐一解释。 接下来,用户可能想知道数据是如何被格式化和输的。常见的格式有JSON、XML、FormData,以及二进制格式如Protobuf。需要说明不同格式的优缺,比如JSON轻量易读,Protobuf高效但需要编译。 然后,需要区分同步和异步输的区别。同步输会导致页面阻塞,而异步(如AJAX)则不会,提升用户体验。用户可能对异步输的具体机制,比如回调、Promise、async/await等感兴趣。 另外,用户可能关心RESTful API和GraphQL的区别。REST基于资源,而GraphQL允许灵活查询,需要举例说明它们的应用场景。 还有文件输的方式,比如multipart/form-data和直接二进制流,之前的问题已经涉及过,这里可能需要简要回顾,并补充其他方法如Base64编码。 安全性方面,HTTPS、CORS、JWT等也是数据输中必须考虑的因素。用户可能想知道如何保证数据输的安全,防止中间人攻击或数据篡改。 最后,要总结不同场景下的最佳实践,帮助用户根据具体需求选择合适的输方式。例如,实应用用WebSocket,简单数据用JSON,大文件用分块上等。 需要确保回答结构清晰,分明确,使用例子和对比来增强理解。同注意用词简洁,避免技术术语过多,让用户容易理解。可能还需要检查之前回答的内容,确保一致性和连贯性,避免重复或矛盾的信息。</think>以下是关于前后端数据输方式的详细说明,从基础到进阶分层解释: --- ### **一、核心输方式分类** 前后端数据输主要分为以下两类: #### **1. 基于 HTTP 协议** - **同步输**(统模式) 通过 `<form>` 表单提交或直接跳转页面,浏览器会刷新并等待服务器响应。 ```html <form action="/submit" method="POST"> <input type="text" name="username"> <button type="submit">提交</button> </form> ``` **特**:简单但用户体验差(页面刷新)。 - **异步输**(现代主流) 使用 `AJAX`(如 `fetch`、`Axios`)或 `WebSocket`,在不刷新页面的情况下输数据。 ```javascript // 使用 Fetch API 异步请求 fetch('/api/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: 'Alice' }) }); ``` **特**:灵活高效,适合动态更新页面内容。 --- #### **2. 数据格式类型** | **格式** | **使用场景** | **示例** | |-------------------|----------------------------------|------------------------------------------| | **Form Data** | 表单提交(文件上) | `Content-Type: multipart/form-data` | | **JSON** | 结构化数据输(主流选择) | `{ "name": "Alice", "age": 25 }` | | **XML** | 统企业接口(逐渐被替代) | `<user><name>Alice</name></user>` | | **二进制流** | 文件输、实音视频 | `Blob`、`ArrayBuffer`、Protobuf | | **URL 参数** | GET 请求中的简单参数递 | `/api/data?name=Alice&age=25` | --- ### **二、关键技术细节** #### **1. 请求方法语义化(RESTful 风格)** - `GET`:获取资源(如加载用户信息) - `POST`:创建资源(如提交表单) - `PUT`:更新完整资源 - `PATCH`:更新部分资源 - `DELETE`:删除资源 #### **2. 数据编码与解析** - **URL 编码** 特殊字符(如空格转为 `%20`)用于 GET 请求参数: ```javascript // 前端自动处理 new URLSearchParams({ name: "Alice Smith" }).toString(); // "name=Alice%20Smith" ``` - **JSON 编码** 前后端统一使用 JSON 交互(需设置 `Content-Type: application/json`): ```javascript // 前端发送 const data = { id: 1, name: "Alice" }; fetch('/api', { method: 'POST', body: JSON.stringify(data) }); // 后端解析(以 Node.js 为例) app.use(express.json()); // 自动解析 JSON 请求体 ``` - **二进制输优化** 使用 `Protobuf` 或 `MessagePack` 替代 JSON,减少体积: ```javascript // Protobuf 示例(需提前定义 .proto 文件) const buffer = UserMessage.encode({ id: 1, name: "Alice" }).finish(); ``` --- ### **三、进阶输场景** #### **1. 大文件分片上** - 前端将文件切割为多个 `Blob` 分片,逐个上: ```javascript const chunkSize = 5 * 1024 * 1024; // 5MB/分片 const chunks = []; for (let i = 0; i < file.size; i += chunkSize) { chunks.push(file.slice(i, i + chunkSize)); } // 依次上 chunks 数组 ``` #### **2. 实通信** - **WebSocket** 双向全双工通信(如聊天室、股票行情): ```javascript const socket = new WebSocket('ws://api.example.com'); socket.onmessage = (event) => { console.log(event.data); }; ``` - **Server-Sent Events (SSE)** 服务器单向推送(如新闻推送): ```javascript const eventSource = new EventSource('/api/stream'); eventSource.onmessage = (event) => { console.log(event.data); }; ``` --- ### **四、安全与性能优化** #### **1. 安全措施** - **HTTPS**:加密输内容,防止中间人攻击 - **CORS 配置**:限制跨域请求来源(如 `Access-Control-Allow-Origin`) - **CSRF Token**:防御跨站请求伪造攻击 - **JWT 鉴权**:在请求头中携带令牌(`Authorization: Bearer <token>`) #### **2. 性能优化** - **压缩数据**:使用 `gzip`/`Brotli` 压缩响应体 - **CDN 加速**:静态资源通过 CDN 分发 - **HTTP/2 多路复用**:减少连接开销 - **客户端缓存**:设置 `Cache-Control` 头减少重复请求 --- ### **五、不同场景的输选择** | **场景** | **推荐方式** | **示例工具/协议** | |------------------------|---------------------------|--------------------------| | 简单表单提交 | Form Data + POST | HTML 表单 | | 动态数据交互 | JSON + AJAX | Axios、Fetch API | | 实聊天 | WebSocket | Socket.IO | | 大文件上 | 分片上 + 二进制流 | Tus 协议、七牛云 SDK | | 高频低延迟数据(游戏) | 二进制协议(Protobuf) | gRPC、FlatBuffers | --- ### **总结** 前后端数据输的核心在于: 1. **协议选择**(HTTP/WebSocket) 2. **数据格式**(JSON/二进制) 3. **性能与安全平衡** 根据具体场景(如实性、数据量、安全性)选择最佳组合,例如: - 普通 CRUD 用 **JSON over HTTP** - 实监控用 **WebSocket + Protobuf** - 文件上用 **分片 + 断**
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值