flask前后端交互

最新推荐文章于 2024-06-24 22:54:04 发布
最新推荐文章于 2024-06-24 22:54:04 发布
阅读量6.9k 收藏 53
点赞数 6
分类专栏： Python 文章标签： flask python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nanke_4869/article/details/123850333
版权
本文介绍了使用Flask框架进行前后端交互的场景，详细讲述了如何通过点击按钮将下拉菜单的内容传递给后端，再将后端处理后的结果反馈到前端显示。涉及的文件包括index.html、script.js和app.py，重点讲解了前端JavaScript如何触发请求以及后端Flask如何接收和响应数据。
摘要由CSDN通过智能技术生成

目录

场景：按下按钮，将左边的下拉选框内容发送给后端，后端再将返回的结果传给前端显示。

  • 按下按钮之前：
    在这里插入图片描述
  • 按下按钮之后：
    在这里插入图片描述

代码结构
这是flask默认的框架（html写在templates文件夹内、css和js写在static文件夹内）
在这里插入图片描述

前端

index.html

很简单的一个select下拉选框，一个按钮和一个文本，这里的 { { temp }} 是从后端调用的。

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="static/css/style.css">
    <title>TEMP</title>
</head
最低0.47元/天 解锁文章
_APTX4869
关注
专栏目录
Flask前后端数据交互
qq_41891186的博客
07-09 1358
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
Python：flask框架下前后端的数据交互
热门推荐
Samven_7的博客
06-07 3万+
后端：python 的 flask 框架 前端：html、css、js 前后端数据交互的三种方式： 1、路由传参数 方法一： 前端(html)： <a href="{{url_for('choose', message_i=key,message_j=val)}}" >供应商</a> // 注意choose是路由所在的函数，不是路由 后端： @app.route(...
【PythonWeb开发】Flask视图函数传递数据到前端模版的方法总结。
qq_39780701的博客
06-24 577
在Flask框架中，视图函数返回响应有四种常见方式，都得掌握。
Python(Flask)前后端交互
m0_46630313的博客
04-17 1654
Flask之axios、Fetch、XMLHttpRequest、SSE等前后端交互操作
flask的前后端交互方式
pocean2012的博客
07-27 5136
以按键为例 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+
flask框架前后端数据交互
渣渣的夏天
08-10 1万+
  flask开发中需要用到ajax进行前端数据交互，主要流程为三步： 前端引用js文件，调用其中函数 js中使用ajax请求接受数据 将js中返回的数据显示到前端   代码展示： 选择1 参考文章：【1】python通过flask和前端进行数据收发      【2】前端与后端的数据交互（jquery ajax+python flask）      【3】python flask 通过ajax...
flask--前后端交互
jiaweide123的博客
01-13 1282
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.
Python Flask前后端Ajax交互的方法示例
09-20
本文将详细介绍如何在Flask中使用Ajax实现前后端交互。 首先，Ajax交互通常涉及两个主要步骤：前端发起请求和后端处理请求。在Flask中，前端通常是HTML页面，通过JavaScript（通常使用jQuery库）来实现Ajax调用。而...
详解Flask前后端分离项目案例
09-16
总的来说，通过这个Flask前后端分离项目案例，我们可以学习到如何设置Flask应用、定义路由、实现API接口、处理认证和权限、以及有效地利用SQLAlchemy进行数据库操作。同时，这个案例也强调了代码质量和设计思路的...
python使用flask与js进行前后台交互的例子
09-19
今天小编就为大家分享一篇python使用flask与js进行前后台交互的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
python如何实现前后端交互_python flask前后端交互问题
weixin_39526185的博客
12-03 1166
谢邀，这里提供一种思路，使用flask_wtf来进行前后端表单交互，入门可以看http://flask123.sinaapp.com/a...这里举一个简单的登陆例子：首先要在后端构造表单，在forms.py中进行定义：from flask_wtf import Formfrom wtforms import StringField, PasswordField, BooleanField, Su...
flask入门（四）前后端数据传输
julac的博客
10-21 4277
模块来自论文：《Sentence-BERT: Sentence Embeddings using Siamese BERT-Networks》，使用孪生网络（Siamse Network）将两个文本映射到特征空间得到特征向量（384维）：先把数据写进字典，字典整体进行传输。
flask+python开发框架的前后端交互
weixin_41761893的博客
11-20 2865
flask是一个用python编写的web应用程序框架。
一站制造工业项目之用flask实现前后端交互可视化
weixin_54513552的博客
07-03 681
一站制造工业项目之用flask实现前后端交互可视化
【flask】08-前后端的数据交互
lu13093323120的博客
10-24 1680
request.args.get() 获取前端传入的参数 前端代码格式为 /xxx?name=“laowang” // 浏览器发起图片验证码请求/image_code?imageCodeId=xxxxx var url = &quot;/passport/image_code?imageCodeId=&quot; + imageCodeId 后端接收代码 @app.route('/image_code') d...
python如何实现前后端交互_Python Flask前后端Ajax交互的方法示例
weixin_42556197的博客
02-10 3243
Python Flask前后端Ajax交互的方法示例发布时间：2020-09-06 13:07:19来源：脚本之家阅读：128作者：夏夜星语之前总结过flask里的基础知识，现在来总结下flask里的前后端数据交互的知识，这里用的是Ajax一、 post方法1、post方法的位置：在前端HTML里，绑定在一个按钮的点击函数里，或者一个鼠标输入框点击离开事件。(1)数据附在URL里(请求路径)，发送...
flask框架实现前后端数据的传递
weixin_43077546的博客
07-10 9788
flask框架实现前后端数据的传递 这几天一直在基于flask框架实现一个登陆和注册界面，并且以管理员的身份对数据库中的数据实现增删改查。刚刚开始着手的时候，如何实现前后端数据的传递这个问题困扰了好久，现在已经解决，所以记录一下防止以后用到。 前端（即html界面）传值到后端 因为现在才刚刚学习所以只掌握了ajax这一种方法（路过的大佬轻喷），具体的步骤如下： 1.给文本框设定id，通过id在aj...
flask实现一个简单的前后端交互功能
Best_fish的博客
01-12 1万+
总共写了4个文件： 一个主程序demo.py 一写测试数据脚本（直接在终端执行添加测试数据） 一个用来添加数据html文件,login.html 一个用来展示数据的html文件,index.html 写的很low的，临时写的，还有很多不用要的，比如manager，已开始写上去准备命令执行已有数据库的迁移，但是从新创建了一个模型类做简单的操作所以用不到，可以删掉的。而且什么验证都没做，添加...
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、付费专栏及课程。

余额充值