【WEB开发.js】HTTP请求和相应报文的头字段：Content-Type （巨巨巨巨详细好懂的举例详解）

news/2024/12/5 0:59:00/

Content-Type 是 HTTP 请求和响应报文中的头字段之一，用于指定发送的数据类型（MIME 类型）。它告诉服务器或客户端数据的格式，方便接收方正确解析和处理内容。

例如，在发送 JSON 数据时，会指定 Content-Type: application/json；而发送 HTML 页面时，则会指定 Content-Type: text/html。

常见的 Content-Type 类型

1. 文本类
  • text/plain：纯文本。
  • text/html：HTML 文档。
  • text/css：CSS 样式表。
  • text/javascript：JavaScript 文件。
2. 应用类
  • application/json：JSON 格式数据，适合传输复杂结构。
  • application/x-www-form-urlencoded：键值对格式，常用于表单数据提交。
  • application/xml：XML 格式数据。
  • application/octet-stream：二进制数据流（任意文件类型，通常用于下载）。
3. 多媒体类
  • image/png：PNG 图片。
  • image/jpeg：JPEG 图片。
  • audio/mpeg：MP3 音频。
  • video/mp4：MP4 视频。
4. 特殊用途
  • multipart/form-data：
    • 用于上传文件或表单数据。
    • 边界（boundary）标识数据段的分隔。
  • application/pdf：PDF 文件。

举例详解~~

1. application/json

用途
  • 用于发送或接收 JSON 格式数据。
  • 适合传输复杂数据（如嵌套对象、数组）。
前端（fetch）
javascript">fetch('/api/data', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ name: 'Alice', age: 30 })
}).then(response => response.json()).then(data => console.log(data));
后端（Python Flask）
from flask import Flask, request, jsonifyapp = Flask(__name__)@app.route('/api/data', methods=['POST'])
def receive_json():data = request.get_json()  # 解析 JSON 数据print(data)  # {'name': 'Alice', 'age': 30}return jsonify({"status": "success", "received": data})if __name__ == '__main__':app.run()

2. application/x-www-form-urlencoded

用途
  • 常用于表单数据提交。
  • 数据编码成 key=value&key=value 的形式，适合简单键值对。
前端（fetch）
javascript">const formData = new URLSearchParams();
formData.append('name', 'Alice');
formData.append('age', '30');fetch('/api/form', {method: 'POST',headers: {'Content-Type': 'application/x-www-form-urlencoded'},body: formData.toString()
}).then(response => response.text()).then(data => console.log(data));
后端（Python Flask）
@app.route('/api/form', methods=['POST'])
def receive_form():data = request.form  # 获取表单数据print(data)  # ImmutableMultiDict([('name', 'Alice'), ('age', '30')])return f"Received: {data.to_dict()}"

3. multipart/form-data

用途
  • 用于上传文件和表单数据。
  • 数据分段发送，每段都有自己的边界（boundary）。
前端（fetch）
javascript">const formData = new FormData();
formData.append('name', 'Alice');
formData.append('file', new File(['Hello'], 'hello.txt'));fetch('/api/upload', {method: 'POST',body: formData // 不需要手动设置 Content-Type，浏览器会自动添加
}).then(response => response.text()).then(data => console.log(data));
后端（Python Flask）
@app.route('/api/upload', methods=['POST'])
def upload_file():name = request.form.get('name')  # 获取普通字段file = request.files.get('file')  # 获取文件对象print(f"Name: {name}, Filename: {file.filename}")return f"File {file.filename} received."

4. text/plain

用途
  • 用于发送纯文本数据。
  • 数据直接是字符串，无需额外格式化。
前端（fetch）
javascript">fetch('/api/plain', {method: 'POST',headers: {'Content-Type': 'text/plain'},body: 'Hello, this is plain text!'
}).then(response => response.text()).then(data => console.log(data));
后端（Python Flask）
@app.route('/api/plain', methods=['POST'])
def plain_text():data = request.data.decode('utf-8')  # 获取原始数据并解码print(data)  # Hello, this is plain text!return f"Received plain text: {data}"

5. text/html

用途
  • 用于返回 HTML 页面。
  • 适合前端动态展示 HTML 内容。
前端（请求示例）
javascript">fetch('/api/html', {method: 'GET'
}).then(response => response.text()).then(html => document.body.innerHTML = html);
后端（Python Flask）
@app.route('/api/html', methods=['GET'])
def return_html():html_content = """<html><body><h1>Welcome to my site</h1></body></html>"""return html_content, 200, {'Content-Type': 'text/html'}

6. application/octet-stream

用途
  • 用于传输任意二进制数据（如文件下载）。
  • 适合需要客户端保存的数据。
前端（下载文件）
javascript">fetch('/api/download').then(response => response.blob()).then(blob => {const url = window.URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'example.bin'; // 保存的文件名a.click();});
后端（Python Flask）
@app.route('/api/download', methods=['GET'])
def download_file():with open('example.bin', 'rb') as f:file_data = f.read()return file_data, 200, {'Content-Type': 'application/octet-stream'}

7. image/png（或其他图片类型）

用途
  • 用于传输图片数据。
前端（请求图片）
javascript">fetch('/api/image').then(response => response.blob()).then(blob => {const img = document.createElement('img');img.src = URL.createObjectURL(blob);document.body.appendChild(img);});
后端（Python Flask）
@app.route('/api/image', methods=['GET'])
def send_image():with open('image.png', 'rb') as f:image_data = f.read()return image_data, 200, {'Content-Type': 'image/png'}

总结

Content-Type用途前端常用方法后端处理方式
application/jsonJSON 数据JSON.stringify()request.get_json()
application/x-www-form-urlencoded表单键值对数据URLSearchParams()request.form
multipart/form-data文件和表单混合数据FormData()request.files + request.form
text/plain纯文本数据直接传字符串request.data.decode()
text/htmlHTML 内容response.text()返回字符串并设置 Content-Type
application/octet-stream二进制数据（文件下载）response.blob()读取文件并设置 Content-Type
image/png图片数据response.blob()读取图片并设置 Content-Type

根据实际需求选择合适的 Content-Type 是前后端通信的关键，可以提高数据解析的正确性和系统的兼容性。


http://www.ppmy.cn/news/1552424.html

相关文章

[RabbitMQ] 延迟队列+事务+消息分发

[RabbitMQ] 延迟队列+事务+消息分发

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…
阅读更多...
无人机主控芯片技术与算法详解！

无人机主控芯片技术与算法详解！

一、无人机主控芯片核心技术 高性能CPU&#xff1a; 无人机需要高性能的CPU来处理复杂的飞行控制算法、图像处理和数据传输等任务。目前&#xff0c;无人机的CPU主要有大疆自研的飞控系统、高通提供的无人机设计平台Snapdragon Flight&#xff0c;以及基于开源平台APM、Px4等…
阅读更多...
HCIA笔记6--路由基础与静态路由：浮动路由、缺省路由、迭代查找

HCIA笔记6--路由基础与静态路由：浮动路由、缺省路由、迭代查找

文章目录 0. 概念1.路由器工作原理2. 跨网访问流程3. 静态路由配置4. 静态路由的应用场景4.1 路由备份4.2 浮动路由4.3 缺省路由 5. 迭代路由6 问题6.1 为什么路由表中有的下一跳的地址有接口&#xff1f;6.2 个人电脑的网关本质是什么&#xff1f; 0. 概念 自治系统&#xff…
阅读更多...
故障诊断 | Transformer-LSTM组合模型的故障诊断（Matlab）

故障诊断 | Transformer-LSTM组合模型的故障诊断（Matlab）

效果一览 文章概述 故障诊断 | Transformer-LSTM组合模型的故障诊断（Matlab） 源码设计 %% 初始化 clear close all clc disp(此程序务必用2023b及其以上版本的MATLAB！否则会报错！) warning off %
阅读更多...
【iOS】设计模式的六大原则

【iOS】设计模式的六大原则

【iOS】设计模式的六大原则 文章目录 【iOS】设计模式的六大原则前言开闭原则——OCP单一职能原则——SRP里氏替换原则——LSP依赖倒置原则——DLP接口隔离原则——ISP迪米特法则——LoD小结 前言 笔者这段时间看了一下有关于设计模式的七大原则&#xff0c;下面代码示例均为OC…
阅读更多...
【Oracle11g SQL详解】INSERT INTO 的用法及插入数据注意事项

【Oracle11g SQL详解】INSERT INTO 的用法及插入数据注意事项

INSERT INTO 的用法及插入数据注意事项 在 Oracle 11g 中&#xff0c;INSERT INTO 语句用于向表中插入数据&#xff0c;是数据写入操作中最常用的 SQL 语句之一。本文将详细介绍 INSERT INTO 的基本语法、常见场景、注意事项及常见错误处理。 一、INSERT INTO 的基本语法 INS…
阅读更多...
详解Vue设计模式

详解Vue设计模式

详解 vue 设计模式 ​ Vue.js 作为一个流行的前端框架&#xff0c;拥有许多设计模式&#xff0c;这些设计模式帮助开发者更好地组织和管理代码&#xff0c;提升代码的可维护性、可扩展性和可读性。Vue 设计模式主要体现在以下几个方面&#xff1a; 1. 组件化设计模式 (Compon…
阅读更多...
MATLAB不动点迭代法求单变量非线性方程的根程序加实例

MATLAB不动点迭代法求单变量非线性方程的根程序加实例

不动点迭代法用于单变量线性方程近似根&#xff0c;首先确定一个方程根附近的近似初始值&#xff0c;采用逐次逼近的方法&#xff0c;使用迭代公式不断地更新这个初始值&#xff0c;使这个初始值不断趋近于准确值。 1.不动点迭代法自定义函数 fixed_point.m是一个MATLAB函数&a…
阅读更多...
最新文章

Copyright @ 2022~2023