html后端-Python前端交互（Flask & Ajax）

bendan520 html

2023-09-01 0 5,652 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

本文是学习如何使用Python前端交互记录。之前没有学过任何Python框架html后端html后端，前端也简单学过。如有问题，希望大家批评指正。

1.前端1.1 HTML布局

这一点无需多言。你们都知道登录是什么样子的。您可以根据自己的情况调整风格。我把最基本的输入框放在这里。

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 简介及固定结构

按需导入，省事直接导入*

<code class="language-python">from flask import *
import json
app = Flask("__name__")
if __name__ == '__main__':
    app.run(port=8899)	# 此处可自定义使用端口

1.2 解决跨域问题

对于经典的前端交互问题，这里有一篇博主的文章：Whatday python Flask跨域问题解决方案

@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

收藏 (0) 打赏

感谢您的支持，我会继续努力的!