本文是自己学习Python前后端交互记录使用，之前没有学习过Python任何框架，前端也是简单学了一下，如哪里有问题，还望大家批评改正。

1. 前端

1.1 HTML布局

这个就不用说啥了，登录长啥样大家都知道，各位根据自己情况调整样式吧，我这里放直接最基本的输入框了。

<div>
    <input type="text" id = "userId">
</div>
<div>
    <input type="password" id="password">
</div>
<button onclick="login()">login</button>

1.2 JS & Ajax

如下所示

function login(){
        $.ajax({
            url:"http://localhost:8899/login",
            type:"post",
            dataType:"json",

            //data为要传递给后端的数据，使用JSON.stringify()转换为json格式
            data:JSON.stringify({
                    userId:   $("#userId").val(),
                    password: $("#password").val()
                }),
            success:function (data){
                alert("登录成功")
                console.log(data)
                console.log(data.status)
                console.log(data.time)
            },
            error:function (){
                alert("登录失败")
                console.log("***********")
            }
        })
    }

2. 后端

本文只是以登录功能做例子来实现前后端交互，因此不涉及与数据库已有用户信息匹配等判断过程，成功获得前端信息则认为“登录”成功。

1.1 引包 & 固定结构

根据需要import，图省事直接import *

from flask import *
import json

app = Flask("__name__")

if __name__ == '__main__':
    app.run(port=8899)	# 此处可自定义使用端口

1.2 解决跨域问题

经典前后端交互问题，这里参考的一位博主的文章：whatday python flask 跨域问题 解决方法https://blog.csdn.net/whatday/article/details/106298170

@app.after_request
def cors(environ):
    environ.headers['Access-Control-Allow-Origin']='*'
    environ.headers['Access-Control-Allow-Method']='*'
    environ.headers['Access-Control-Allow-Headers']='x-requested-with,content-type'
    return environ

1.3 json 数据接收&回复

方法 post 

接收前端的数据：    request.get_data()获取字符串，json.loads()转化为json

给前端回复json：     jsonify() 将数据转化为json格式

@app.route('/login', methods=['POST'])
def login():
    # 获取前端json数据
    data = request.get_data()
    print(data)
    json_data = json.loads(data)
    print(json_data)

    Id = json_data.get("userId")
    password = json_data.get("password")
    print("userId is "+Id)
    print("password is "+password)

    # 给前端传输json数据
    info = dict()
    info['status'] = 'success'
    info['time'] = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    return jsonify(info)

3. 最终结果

3.1 前端控制台

alert：

控制台json数据

3.2 后端控制台