falsk前后端交互
时间: 2023-11-09 19:02:47 浏览: 183
在 Flask 中,前后端交互可以通过 AJAX 技术实现。具体步骤如下:
1. 在前端页面中使用 JavaScript 发送 AJAX 请求,请求后端接口。
2. 后端接收到请求后,处理请求并返回数据。
3. 前端接收到后端返回的数据后,使用 JavaScript 更新页面内容。
下面是一个简单的示例:
前端代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flask AJAX Demo</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>Flask AJAX Demo</h1>
<button id="btn">点击发送请求</button>
<div id="result"></div>
<script>
$(function() {
$('#btn').click(function() {
$.ajax({
url: '/api',
type: 'GET',
success: function(data) {
$('#result').text(data);
}
});
});
});
</script>
</body>
</html>
```
后端代码:
```python
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/')
def index():
return app.send_static_file('index.html')
@app.route('/api')
def api():
return jsonify({'message': 'Hello, world!'})
if __name__ == '__main__':
app.run()
```
阅读全文