Flask框架与前端进行交互的方式通常是通过HTTP请求和响应进行数据传输，通常通过AJAX或表单提交进行前后端的互动。这里详细讲解了如何在Flask中进行前后端交互，包括与前端的HTML、JavaScript的集成、如何使用AJAX进行异步请求，以及如何通过API返回JSON数据等。
在Flask框架中，前端与后端的交互大致有两种方式：
Flask的后端通过Jinja2模板引擎将数据动态渲染到HTML页面中，然后将页面返回给客户端。
Flask使用render_template()来渲染HTML模板，将后端数据传递给前端显示。
后端代码 (Flask)：
pythonfrom flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
user = {'username': 'John'}
return render_template('index.html', user=user)
前端代码 (index.html)：
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask Frontend</title>
</head>
<body>
<h1>Welcome, {{ user.username }}!</h1>
</body>
</html>
在上面的代码中，user字典被传递给HTML模板，在模板中使用{{ user.username }}渲染用户的名字。
你可以使用HTML表单将数据提交到Flask后端，后端通过request对象获取表单数据。
前端代码 (form.html)：
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Submit Form</title>
</head>
<body>
<form action="/submit" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<button type="submit">Submit</button>
</form>
</body>
</html>
后端代码 (Flask)：
pythonfrom flask import Flask, request, render_template
app = Flask(__name__)
@app.route('/')
def form():
return render_template('form.html')
@app.route('/submit', methods=['POST'])
def submit():
username = request.form['username']
return f'Username submitted: {username}'
在此例中，用户填写表单并提交，Flask通过request.form获取表单数据。
AJAX（Asynchronous JavaScript and XML）是一种用于在不重新加载页面的情况下，向服务器请求数据的技术。Flask可以通过JSON格式响应AJAX请求，前端通过JavaScript处理返回的数据。
使用XMLHttpRequest或fetch() API，前端可以发送异步请求到Flask后端，后端返回JSON数据。
前端代码 (AJAX请求)：
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Example</title>
<script>
function fetchData() {
fetch('/data')
.then(response => response.json())
.then(data => {
document.getElementById('result').innerHTML = 'User: ' + data.username;
})
.catch(error => console.error('Error:', error));
}
</script>
</head>
<body>
<button onclick="fetchData()">Fetch Data</button>
<div id="result"></div>
</body>
</html>
后端代码 (Flask)：
pythonfrom flask import Flask, jsonify
app = Flask(__name__)
@app.route('/data')
def get_data():
return jsonify(username='JohnDoe', age=30)
在此示例中，前端通过fetch函数向/data发送GET请求。Flask返回一个包含JSON数据的响应，前端将返回的数据插入到页面中。
AJAX也可以用于发送POST请求，前端可以通过JSON格式发送数据，后端接收数据并返回响应。
前端代码 (AJAX POST请求)：
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX POST Example</title>
<script>
function submitData() {
const data = {
username: document.getElementById('username').value
};
fetch('/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => {
document.getElementById('result').innerHTML = result.message;
})
.catch(error => console.error('Error:', error));
}
</script>
</head>
<body>
<input type="text" id="username" placeholder="Enter username">
<button onclick="submitData()">Submit</button>
<div id="result"></div>
</body>
</html>
后端代码 (Flask)：
pythonfrom flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/submit', methods=['POST'])
def submit():
data = request.get_json() # 获取JSON数据
username = data.get('username')
return jsonify(message=f'Username received: {username}')
在此示例中，前端通过AJAX发送包含JSON数据的POST请求，Flask接收数据并返回一个JSON响应。
Flask可以与前端框架如React、Vue、Angular等配合使用。通常，这些框架负责前端的UI部分，而Flask处理后端的逻辑与API接口。
React通常通过API与Flask后端交互。前端通过fetch或axios等库向Flask的API发送请求，Flask处理请求后返回数据。
Flask API (Flask)：
pythonfrom flask import Flask, jsonify
app = Flask(__name__)
@app.route('/api/user')
def get_user():
return jsonify(username='JohnDoe', age=30)
React代码 (React)：
javascriptimport React, { useState, useEffect } from 'react';
function App() {
const [user, setUser] = useState(null);
useEffect(() => {
fetch('/api/user')
.then(response => response.json())
.then(data => setUser(data));
}, []);
return (
<div>
{user ? (
<p>User: {user.username}, Age: {user.age}</p>
) : (
<p>Loading...</p>
)}
</div>
);
}
export default App;
Flask-SocketIO使得Flask能够支持WebSocket协议，允许前后端进行双向实时通信。WebSocket允许前后端之间建立持久连接，实时发送数据。
bashpip install flask-socketio
后端代码 (Flask-SocketIO)：
pythonfrom flask import Flask, render_template
from flask_socketio import SocketIO, emit
app = Flask(__name__)
socketio = SocketIO(app)
@app.route('/')
def index():
return render_template('index.html')
@socketio.on('message')
def handle_message(message):
print(f'Received message: {message}')
emit('response', {'data': 'Message received!'})
前端代码 (index.html)：
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SocketIO Example</title>
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
<script>
var socket = io.connect('http://' + document.domain + ':' + location.port);
socket.on('connect', function() {
socket.send('Hello Server!');
});
socket.on('response', function(data) {
document.getElementById('result').innerText = data.data;
});
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
POST请求提交到后端，后端通过request.form获取数据。
fetch或XMLHttpRequest发起异步请求，Flask后端返回JSON数据，前端更新UI。通过这些方式，Flask可以实现强大的前后端交互功能，满足不同类型的Web应用需求。
本文作者:晏秋
本文链接:
版权声明:本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！