Python前后端交互（ Flask & Ajax ）

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

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

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

如下所示

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("***********")
            }
        })
    }

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

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

from flask import *
import json

app = Flask("__name__")

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

经典前后端交互问题，这里参考的一位博主的文章：what day python flask 跨域问题解决方法https://blog.csdn.net/what day/ar ti cle/de tail s/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

@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)