本文是自己学习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 jsonapp = 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 后端控制台

Python前后端交互（ Flask Ajax ）相关推荐

python前后端交互_Django基础之简单的前后端交互
Python Python开发 Python语言 Django基础之简单的前后端交互学习Django有一段时间了,最近刚好写了一个小项目,用到了前后端交互,刚开始写前后端交互确实很让人头晕目眩呢,下 ...
【前端】前后端交互重点Ajaxの介绍及实战
❤️Ajax❤️ 每篇前言: 第一部分:JSON简介效果展示: 第二部分:前后交互 1.此处介绍前后交互的两种方式: (1)利用form表单里的name属性进行前后端交互 HTML代码: Pytho ...
ajax学习----json，前后端交互，ajax
json <script>var obj = {"name": "xiaopo","age": 18,"gender& ...
前后端交互之——AJAX提交
前言学前后端也有一段时间了,一直没有时间整理一下前后端交互方面的知识,想着再回顾一下顺带着整理出自己的学习笔记.可能有些地方写的不是很好,欢迎批评指正!!! 目录前言一.AJAX是什么二.AJ ...
[JavaScript][AJAX] 前后端交互流程,ajax工作流程
目录前后端交互流程 1.了解服务器 : 提供服务器的机器(计算机) 2.前端访问服务器的几种方式 3.ajax技术 : 页面不跳转的情况下,向服务器请求数据 4.前后端交互三个流程 ajax工作流 ...
JavaScript 学习笔记（八）前后端交互；Ajax进行前后端交互
目录一.前后端二.前后端接口三.Ajax 1. ajax接口步骤 2. 返回为json格式四.请求方式五.案例:登录一.前后端前端:用户可以看见的界面,我们一般浏览网页时看到的界面,展现 ...
必学习的前后端交互框架ajax
ajax显然是最重要的框架无论是c#,java,web程序通通能够解决前后端问题. 现在越来越多的人能够开发,为什么? 框架已经改变了程序员,现在基本是个程序员都可以在一个星期内写一个web程序. ...
一、Django前后端交互之Ajax和跨域问题
一.Ajax介绍 1.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX(Asynchronous Javascript And XML)翻译成中文就是" ...
Flask使用ajax进行前后端交互
ajax前后端交互的使用已经非常普及了, 这种数据交互方式比表单提交数据带给用户的使用体验更好一些.同时,利用ajax交互时数据传输一般使用json,我们可以很方便的管理我们所需要的数据.只需要定义好 ...

Python前后端交互（ Flask Ajax ）