后端flask怎么post到前端
时间: 2023-10-03 17:02:26 浏览: 54
在 Flask 后端向前端发送数据,可以通过使用 Ajax 技术来实现。以下是一个简单的 Flask + Ajax 示例代码:
在前端 HTML 中,可以添加如下代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flask Ajax Demo</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="result"></div>
<script>
$.ajax({
url: "/api/data",
type: "POST",
data: {name: "Alice", age: 28},
dataType: "json",
success: function(data) {
$("#result").html("Name: " + data.name + "<br>Age: " + data.age);
},
error: function() {
alert("Error!");
}
});
</script>
</body>
</html>
```
在 Flask 后端中,可以添加如下代码:
```python
from flask import Flask, jsonify, request
app = Flask(__name__)
@app.route("/api/data", methods=["POST"])
def api_data():
name = request.form.get("name")
age = request.form.get("age")
return jsonify({"name": name, "age": age})
if __name__ == "__main__":
app.run()
```
这个例子中,我们在前端中使用 Ajax 向 Flask 后端发送数据,Flask 后端接收到数据后,将数据转换为 JSON 格式并返回给前端。在前端中,我们使用 jQuery 的 Ajax 方法来接收 Flask 后端返回的 JSON 数据,并在页面上显示出来。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)