python使用flask模块和前端交互基础_python flask 代理前端页面

作者：weixin_40725706 | 2024-03-03 22:19:38

踩

python flask 代理前端页面

python利用flask模块和前端进行交互基础

一、模块使用：

python：flask、flask_cors
【两个都是第三方模块需要进行按照】推荐使用豆瓣源安装，以下为豆瓣源安装方法

pip install flask -i https://pypi.douban.com/simple/
pip install flask_cors -i https://pypi.douban.com/simple/
1
2

前端： Ajax

二、代码演示

python

from flask import Flask
from flask_cors import CORS #导入解决跨域问题的模块
app = Flask(__name__)

CORS(app, supports_credentials=True) #动态解决前端跨域问题
app.debug = True #开启flask调试模式
@app.route('/',methods=['post']) #指定请求路径、方法
def add_stu():
    student_json = {"name":"jerry","age":15,"class":["math","english","chinese"],"state":True}
    return student_json
if __name__ == '__main__':
    app.run(host='localhost',port=1234)#指定端口号和地址

1
2
3
4
5
6
7
8
9
10
11
12
13

web界面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flask模块前端测试界面</title>
</head>
<body>
  <button onclick="fun()">请求数据</button>
  <script>
    function fun(){
      console.log('request begin')
      var xhr = new XMLHttpRequest();
      xhr.open('post','http://localhost:1234',true);
      xhr.send(null);
      xhr.onreadystatechange = async function(){
        if(xhr.readyState === 4){
          if(xhr.status === 200){
            var result = xhr.responseText
            var resultJson = JSON.parse(result)
            console.log(resultJson)
          }
        }
      }
    }
  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

最后

前端获取信息
在这里插入图片描述

前端主要使用的模块是XMLHttpRequest(),使用方法比较简单，所以没有加注释信息，如果有对这块不是太了解的伙伴，可以参考JS中的Ajax发送请求获取数据流程

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/185719