Python(Flask)前后端交互

已于 2024-04-18 11:23:21 修改
阅读量1.8k 收藏 36
点赞数 26
文章标签： python javascript 交互
于 2024-04-17 11:58:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46630313/article/details/135606971
版权

一.axios

  •  axios的特点

  1. Promise 支持： Axios 是基于 Promise 实现的，使用 Promise 对 HTTP 请求进行处理。这使得异步请求更为灵活，可以使用 .then() 和 .catch() 处理成功和失败的情况，使得异步代码更加清晰和可维护。 

  2. 拦截器： Axios 提供了请求和响应拦截器，允许在请求或响应被处理前拦截它们。这提供了一种机制，使得可以在请求发送或响应返回时进行全局或局部的操作，如添加请求头、修改请求数据、处理错误等。

  3. CSRF 保护： Axios 集成了对跨站请求伪造（CSRF）的保护机制。可以通过配置选项来自动在请求中添加 CSRF token，提高应用的安全性。

  4. 取消请求： Axios 允许取消请求，通过创建 CancelToken，可以在需要时取消一个或多个请求。这在用户取消请求或页面切换时尤其有用，可以减少不必要的网络请求，提高性能。

  5. 自动转换 JSON： 默认情况下，Axios 会自动将响应数据转换为 JSON 格式。这减少了在处理响应时的手动转换步骤，提高了开发效率。

  6. 客户端和服务端通用： Axios 不仅可以在浏览器中使用，也可以在 Node.js 环境中使用，使得开发者可以在前后端通用的代码中使用相同的 HTTP 客户端

  7. 并发请求处理： Axios 支持同时发送多个请求，并提供了 axios.all 和 axios.spread 方法用于处理并发请求的结果。这使得在需要同时发起多个请求时更为方便。

  •  请求方法

axios.get发送 GET 请求。可以传递一个 URL 和一个可选的配置对象。
axios.post发送 POST 请求。可以传递一个 URL、请求数据（可选）和一个可选的配置对象。
axios.put发送 PUT 请求。与 axios.post 类似，用于更新资源。
axios.delete发送 DELETE 请求。用于删除指定的资源。
axios.all用于同时处理多个请求。可以传递一个包含多个 Promise 的数组或对象。
axios.create用于创建一个新的 Axios 实例，允许配置该实例的默认选项，如 baseURL、headers 等。

  • 代码案例

try:
    parameter = request.json.get('parameter')
    return jsonify({'correctMessage': "正确"})
except Exception as e:
    # 发送错误消息，并设置状态码为500
    return jsonify({'errorMessage':str(e)}), 500
    
axios.post('/路由', {parameter: 参数})
	.then(response => {
		// 处理正确消息
		const correctMessage = response.data.correctMessage;
		console.log(correctMessage);
	})
	.catch(error => {
		// 处理错误消息
		const errorMessage = error.response.data.errorMessage;
		console.log(errorMessage);
	})
    .finally(() => {
        // 无论成功或失败，都会执行的操作
        // 用于释放资源、关闭加载动画或进行一些收尾工作，例如清理工作或隐藏加载状态
        console.log('Request completed');
    });

二.Fetch

  • Fetch API特点

  1. 基于 Promise：Fetch API 使用 Promise 对象来处理异步请求。这使得它更容易编写和管理异步代码，并且可以避免回调地狱的问题。

  2. 内置于浏览器：Fetch API 是浏览器内置的标准 API，不需要额外的库或插件。它是现代浏览器的一部分，因此可以在大多数现代浏览器中直接使用。

  3. 支持异步请求：Fetch API 支持发送各种类型的 HTTP 请求，包括 GET、POST、PUT、DELETE 等，并且可以发送和接收 JSON、FormData、Blob 等类型的数据。

  4. 简洁的语法：Fetch API 的语法非常简洁和直观，使用起来十分方便。它的请求和响应对象都是基于流式操作的，可以通过链式调用来设置请求参数、处理响应数据等。

  5. 可自定义的请求和响应：Fetch API 允许用户灵活地配置请求和响应，包括设置请求头、请求方法、请求体、响应类型等。这使得它非常适合于各种不同的网络请求场景。

  6. 跨域请求：Fetch API 默认支持跨域请求，并且可以通过设置 CORS（跨域资源共享）头来控制跨域请求的行为。

  7. 可替代性：Fetch API 可以替代传统的 XMLHttpRequest 对象，具有更加现代化的设计和更好的性能。它是未来 Web 开发的主流趋势之一。

  •  请求方法

GET用于从服务器获取数据
DELETE用于从服务器删除资源
HEAD用于从服务器获取资源的头信息，与 GET 类似，不返回实际的资源内容，只返回头信息
POST用于向服务器发送数据，服务器处理该数据
PUT用于向服务器发送数据以创建或更新资源，PUT 请求通常用于更新整个资源
PATCH用于部分更新服务器上的资源，PATCH 请求通常用于更新资源的部分属性

  • 代码案例

try:
    # 获取前端传递的 JSON 数据
    data = request.get_json()
    parameter = data.get('parameter')
    return Response(stream, content_type='video/mp4')
except Exception as e:
    # 发送错误消息，并设置状态码为500
    return jsonify({'errorMessage':str(e)}), 500
fetch('/路由', {
	method: 'POST', 
	headers: {
		'Content-Type': 'application/json'
	},
	body: JSON.stringify(parameter)  // 将 JSON 对象转为字符串并发送给后端
})
	.then(response => {
		if (response.ok) {
			// HTTP 状态码在成功范围内
			return response.blob();
		} else {
			// HTTP 状态码表示请求失败
			return response.json().then(data => {
				throw new Error(data.errorMessage);
			});
		}
	})
	.then(blob => {
		videoPlayer.src = URL.createObjectURL(blob);
	})
	.catch(error => {
		// 插入错误内容
        console.log(error.message);
	});

  • 处理响应的方法

  1. response.text()：适用于处理文本文件或纯文本响应
  2. response.json()：适用于处理 JSON 数据
  3. response.arrayBuffer()：适用于处理纯粹的二进制数据
  4. response.blob()：适用于处理具有更多元数据的二进制数据，通常用于处理文件和媒体数据
  5. response.formData()：适用于处理表单数据

三.XMLHttpRequest

  • XMLHttpRequest特点

  1. 异步性：XMLHttpRequest 支持异步请求，可以在不阻塞页面加载情况下发送请求和接收响应。这使用户在等待请求完成的同时可以继续浏览页面或执行其他操作，提升了用户体验。

  2. 灵活性：XMLHttpRequest 提供了丰富的 API 和配置选项，可以满足各种不同的请求需求。例如，可以设置请求方法、请求头、请求参数、超时时间等。

  3. 跨域支持：XMLHttpRequest 可以发送跨域请求，但在同源策略的限制下，它只能发送同源的请求。通过 CORS（跨源资源共享）机制，服务器可以允许跨域请求。

  4. 同步请求：除了支持异步请求外，XMLHttpRequest 还可以发送同步请求。但是，同步请求会阻塞页面加载，因此不推荐在主线程中使用。

  5. 原生支持：XMLHttpRequest 是浏览器原生支持的技术，在大多数现代浏览器中都可以使用，并且不需要额外的插件或库。

  6. 对数据格式的支持：XMLHttpRequest 支持多种数据格式，包括文本、JSON、XML、Blob、FormData 等，可以根据需要进行选择和处理。

  7. 事件驱动：XMLHttpRequest 使用事件模型来处理请求和响应，开发者可以通过监听各种事件（如 load、progress、error 等）来处理请求状态变化和响应数据。

  8. 底层接口：XMLHttpRequest 提供了底层的 API，使开发者可以更灵活地控制请求和响应的细节，实现自定义的数据交换逻辑。

  • 请求方法

GET

用于从服务器获取数据，不会对服务器端资源进行修改
POST用于向服务器提交数据，通常用于创建新资源或向服务器提交表单数据
PUT用于更新服务器上的资源，通常用于更新整个资源
DELETE用于删除服务器上的资源
PATCH用于部分更新服务器上的资源，通常用于更新资源的部分属性
OPTIONS

用于获取服务器支持的请求方法，通常在跨域请求中预检查服务器是否支持某个请求方法时使用

  • 代码案例 

try:
    # 获取前端传递的数据
    parameter = request.args.get('parameter')
    return jsonify("ok")
except Exception as e:
    # 发送错误消息，并设置状态码为500
    return jsonify({'errorMessage':str(e)}), 500
// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();
// 打开GET请求
xhr.open('GET', '/路由?parameter=' + 参数, true);
// 监听请求状态变化事件
xhr.onreadystatechange = function() {
  // 当请求完成并且响应就绪时
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      // 响应成功，处理返回的数据
      console.log(xhr.responseText);
  } else {
      // 响应失败，输出错误信息
      console.log(xhr.responseText);
    }
};
xhr.send();

四.SSE

  • SSE特点

  1. 单向通信：SSE 是一种单向通信方式，只允许服务器向客户端推送数据，客户端无法向服务器发送数据。
  2. 基于 HTTP：SSE 基于 HTTP 协议，使用标准的 HTTP 请求和响应头来建立连接，并通过长连接保持持续的通信。
  3. 长连接：SSE 基于长连接（HTTP Keep-Alive），通过保持连接打开状态，实现服务器持续向客户端发送数据，而无需客户端发起新的请求。
  4. 文本数据格式：SSE 使用文本数据格式传输数据，通常是纯文本或格式化的文本数据，可以是 JSON、XML 等格式。
  5. 事件流：服务器向客户端发送的数据以事件流的形式传输，每个事件以特定的格式发送，包括数据字段和可选的事件类型、标识符等。
  6. 自动重连：如果连接断开或丢失，客户端会自动尝试重新建立连接，从而保持持续的通信。
  7. 跨域支持：SSE 支持跨域通信，可以在不同域名、不同端口或不同协议的服务器之间进行通信。
  8. 实时更新：由于是单向实时通信，因此可以用于实时更新网页内容、实时推送事件通知、实时更新数据等应用场景。

  • 代码案例 

def sse():
    def generate_events():
        for i in range(10):
            # 发送事件数据
            yield f"data:{i}\n\n"  
    return Response(generate_events(), content_type='text/event-stream')
// 检查是否已经存在一个 EventSource 对象，如果存在，则关闭它
let eventSource = null;
if (eventSource) {
	eventSource.close();
}
// 建立 SSE 连接
const eventSource = new EventSource('/路由');
// 监听SSE消息
eventSource.onmessage = (event) => {
    const eventData = event.data;
};
// 监听SSE连接错误
eventSource.onerror = (error) => {
    console.error('连接错误:', error);
    // 关闭 SSE 连接
    eventSource.close();
};

泛滥丶
关注
Flask前后端数据交互
qq_41891186的博客
07-09 1399
1.前端展示Flask后端的数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> {{name}} </div> </body> </html> from flask imp
flask--前后端交互
jiaweide123的博客
01-13 1302
1.后端代码 from flask import Flask,request,render_template app = Flask(__name__) ''' 1.在项目文件夹下创建templates文件夹 2.在templates文件夹中创建html文件 3.如果templates文件下有其他文件夹，那么就需要在render_template()中输入目录地址 4.静态文件（js，css）需要在项目文件夹下创建一个static文件夹，把js或者css文件放在static文件夹下 ''' @app.
flask+python开发框架的前后端交互
weixin_41761893的博客
11-20 3094
flask是一个用python编写的web应用程序框架。
python FlaskAPI+js fetchAPI 实现前后端卡号注册绑定
最新发布
hih30250的博客
09-22 1756
API，全称为 Application Programming Interface，即应用程序编程接口。它是不同软件系统之间的通信规则和约定，允许一个软件应用程序与另一个应用程序或服务进行数据交换和功能调用。通过 API，开发者无需了解外部系统的内部工作原理，也可以轻松利用其功能。API 是以标准化的方式提供数据和服务的接口，它定义了一组调用方法和返回结果的规则，使不同的系统可以协同工作。无论是访问天气数据、处理支付请求，还是调用社交媒体服务，API 都是背后的驱动力。
flask前后端交互
nanke_4869的博客
03-30 6974
目录前端index.htmlscript.js后端app.py 场景：按下按钮，将左边的下拉选框内容发送给后端，后端再将返回的结果传给前端显示。 按下按钮之前： 按下按钮之后： 代码结构 这是flask默认的框架（html写在templates文件夹内、css和js写在static文件夹内） 前端 index.html 很简单的一个select下拉选框，一个按钮和一个文本，这里的 {{ temp }} 是从后端调用的。 <html> <head> <me
flask的前后端交互方式
pocean2012的博客
07-27 5168
以按键为例 1. 路由跳转 route修饰器在主程序指定处理函数，通过跳转到路径触发相应操作 超级链接跳转href 2. http方法传递参数，json返回 3. 网页js函数发送查询指令，json返回数据，回显或改变页面 ajax方式交换数据 https://blog.csdn.net/we1583004we/article/details/81557240 https://blog.csdn.net/kikaylee/article/details/54885250 jquery+
Python前后端交互（ Flask & Ajax ）
m0_57193008的博客
04-17 1万+
Python前后端交互（ Flask & Ajax ）
flask框架前后端数据交互
渣渣的夏天
08-10 1万+
  flask开发中需要用到ajax进行前端数据交互，主要流程为三步： 前端引用js文件，调用其中函数 js中使用ajax请求接受数据 将js中返回的数据显示到前端   代码展示： 选择1 参考文章：【1】python通过flask和前端进行数据收发      【2】前端与后端的数据交互（jquery ajax+python flask）      【3】python flask 通过ajax...
flask入门（四）前后端数据传输
julac的博客
10-21 4523
模块来自论文：《Sentence-BERT: Sentence Embeddings using Siamese BERT-Networks》，使用孪生网络（Siamse Network）将两个文本映射到特征空间得到特征向量（384维）：先把数据写进字典，字典整体进行传输。
Python Flask前后端Ajax交互的方法示例
09-20
本文将详细介绍如何在Flask中使用Ajax实现前后端交互。 首先，Ajax交互通常涉及两个主要步骤：前端发起请求和后端处理请求。在Flask中，前端通常是HTML页面，通过JavaScript（通常使用jQuery库）来实现Ajax调用。而...
python如何实现前后端交互_python flask前后端交互问题
weixin_39526185的博客
12-03 1183
谢邀，这里提供一种思路，使用flask_wtf来进行前后端表单交互，入门可以看http://flask123.sinaapp.com/a...这里举一个简单的登陆例子：首先要在后端构造表单，在forms.py中进行定义：from flask_wtf import Formfrom wtforms import StringField, PasswordField, BooleanField, Su...
python使用flask与js进行前后台交互的例子
09-19
今天小编就为大家分享一篇python使用flask与js进行前后台交互的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
python如何实现前后端交互_Python Flask前后端Ajax交互的方法示例
weixin_42556197的博客
02-10 3268
Python Flask前后端Ajax交互的方法示例发布时间：2020-09-06 13:07:19来源：脚本之家阅读：128作者：夏夜星语之前总结过flask里的基础知识，现在来总结下flask里的前后端数据交互的知识，这里用的是Ajax一、 post方法1、post方法的位置：在前端HTML里，绑定在一个按钮的点击函数里，或者一个鼠标输入框点击离开事件。(1)数据附在URL里(请求路径)，发送...
python前后端简单交互
静心学习，开心生活
07-02 1708
无
一站制造工业项目之用flask实现前后端交互可视化
weixin_54513552的博客
07-03 703
一站制造工业项目之用flask实现前后端交互可视化
Flask前后端交互：实现基本的数据传输和交互
RfqrScheme的博客
09-17 575
在本文中，我们将探讨如何使用Flask实现基本的前后端交互，包括数据传输和交互。我们将创建一个简单的应用，其中包含一个HTML表单，用户可以在表单中输入一些文本，然后将其提交给后端进行处理。现在，我们已经完成了一个简单的Flask应用，实现了基本的前后端交互。当用户在表单中输入文本并提交后，后端会对数据进行处理，然后将处理结果传递给前端进行展示。通过Flask，你可以构建更复杂的Web应用程序，并实现更多的数据传输和交互功能。函数对数据进行处理。模板中，我们创建了一个包含一个输入框和提交按钮的表单。
flask实现一个简单的前后端交互功能
热门推荐
Best_fish的博客
01-12 1万+
总共写了4个文件： 一个主程序demo.py 一写测试数据脚本（直接在终端执行添加测试数据） 一个用来添加数据html文件,login.html 一个用来展示数据的html文件,index.html 写的很low的，临时写的，还有很多不用要的，比如manager，已开始写上去准备命令执行已有数据库的迁移，但是从新创建了一个模型类做简单的操作所以用不到，可以删掉的。而且什么验证都没做，添加...
chatgpt赋能python：Python前端与后端的数据交互
findyi123的博客
06-03 1008
本文由chatgpt生成，文章没有在chatgpt生成的基础上进行任何的修改。以上只是chatgpt能力的冰山一角。作为通用的Aigc大模型，只是展现它原本的实力。对于颠覆工作方式的ChatGPT，应该选择拥抱而不是抗拒，未来属于“会用”AI的人。🧡AI职场汇报智能办公文案写作效率提升教程 🧡专注于AI+职场+办公方向。下图是课程的整体大纲下图是AI职场汇报智能办公文案写作效率提升教程中用到的ai工具。
python前后台数据交互_Django-前后台的数据交互
weixin_39715187的博客
12-10 216
Django 从后台往前台传递数据时有多种方法可以实现。最简单的后台是这样的：from django.shortcuts importrenderdefmain_page(request):return render(request, 'index.html')这个就是返回index.html的内容，但是如果要带一些数据一起传给前台的话，该怎么办呢？view >> HTML这里是这样：...
python flask前后端交互
07-03
Python Flask是一个轻量级的Web应用框架，常用于构建快速原型和小型网站。Flask的核心在于其简单易用，能够方便地处理HTTP请求与响应，非常适合前后端分离架构中的后端开发。 在Flask中，前后端交互主要通过以下几种方式： 1. **RESTful API**（Representational State Transfer）：Flask提供了丰富的路由功能，开发者可以通过定义URL映射和对应的视图函数（View Functions），来创建RESTful接口。客户端（如前端JavaScript或移动应用）发送HTTP请求到这些API，获取数据或者执行操作。 ```python from flask import Flask, jsonify app = Flask(__name__) @app.route('/api/users', methods=['GET']) def get_users(): users = [{'id': 1, 'name': 'Alice'}, {'id': 2, 'name': 'Bob'}] return jsonify(users) # 更复杂的接口示例，返回JSON格式的数据 @app.route('/api/products/<int:id>', methods=['GET']) def get_product(id): product_data = {'id': id, 'name': 'Product {}'.format(id)} return jsonify(product_data) ``` 2. **模板引擎**：Flask支持多种模板引擎（比如Jinja2），前端开发者可以在HTML文件中嵌入Python代码，从而动态渲染数据。前端可以通过Ajax等技术向服务器请求数据，并将接收到的数据插入到页面中。 ```html <!-- templates/index.html --> {% for user in users %} <li>{{ user.name }}</li> {% endfor %} ``` 在后端接收前端的AJAX请求并填充数据： ```python from flask import render_template_string @app.route('/users') def list_users(): users = [{'id': 1, 'name': 'Alice'}, {'id': 2, 'name': 'Bob'}] rendered_html = render_template_string('<ul>{% for user in users %} <li>{{ user.name }}</li> {% endfor %}</ul>', users=users) return rendered_html ``` 3. **WebSocket**：Flask扩展库如`Flask-SocketIO`或`Flask-WTF-Signature`可以实现双向通信，例如聊天应用、实时更新等功能。 ```python from flask_socketio import SocketIO app = Flask(__name__) socketio = SocketIO(app) @socketio.on('message') def handle_message(message): # 处理前端发送的消息 if __name__ == '__main__': socketio.run(app) ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值