python使用flask模块和前端交互基础

最新推荐文章于 2024-07-11 15:25:58 发布

讷言丶

最新推荐文章于 2024-07-11 15:25:58 发布

阅读量2.9k

点赞数 2

分类专栏：前端 python 文章标签： flask 前端 python

本文链接：https://blog.csdn.net/weixin_51033461/article/details/122349346

版权

前端同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

python

18 篇文章 5 订阅

订阅专栏

本文介绍了如何使用Python的Flask模块和前端Ajax进行数据交互。通过实例展示了Flask设置跨域支持、创建API接口以及前端使用XMLHttpRequest发送POST请求获取数据的过程。重点讲解了Flask的CORS配置和Ajax请求响应的处理。

摘要由CSDN通过智能技术生成

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/

前端： 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)#指定端口号和地址

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>

最后

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

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

讷言丶

关注

2
点赞
踩
27

收藏

觉得还不错? 一键收藏
打赏
1
评论
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/前端： Ajax二、代码演示pythonfrom flask import Flaskfr
复制链接

扫一扫