前端

index.html

很简单的一个select下拉选框，一个按钮和一个文本，这里的 {{ temp }} 是从后端调用的。

<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><link rel="stylesheet" href="static/css/style.css"><title>TEMP</title>
</head><body><div class="container"><div class="person"><select id="person-one"><option value="新一">新一</option><option value="小兰">小兰</option><option value="柯南">柯南</option><option value="小哀">小哀</option></select></div><div class="transfer"><button class="btn" id="swap">转换</button>    </div><p id="display">{{ temp }}</p></div><script src="/static/js/script.js"></script>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>

script.js

这里给按钮添加一个监听事件，按下就会给服务器发送内容，成功了则返回内容并更改display。

注意

需要在html里添加<script src="https://code.jquery.com/jquery-3.6.0.min.js">，否则$字符会报错。
dataType如果选择的是json，则前后端交互的内容均应为json格式。

const person = document.getElementById('person-one');
const swap = document.getElementById('swap');function printPerson() {$.ajax({type: "POST",url: "/index",dataType: "json",data:{"person": person.value},success: function(msg){console.log(msg);$("#display").text(msg.person);//注意显示的内容},error: function (xhr, status, error) {console.log(error);}});
}swap.addEventListener('click', printPerson);

后端

app.py

from flask import Flask, render_template, requestapp = Flask(__name__)@app.route('/')
@app.route("/index", methods=['GET', 'POST'])
def index():message = "选择的人物为："if request.method == 'POST':person = str(request.values.get("person"))return {'person': person}return render_template("index.html", temp=message)if __name__ == '__main__':app.run(host='0.0.0.0', port=8987, debug=True)

flask前后端交互相关推荐

Flask使用ajax进行前后端交互
ajax前后端交互的使用已经非常普及了, 这种数据交互方式比表单提交数据带给用户的使用体验更好一些.同时,利用ajax交互时数据传输一般使用json,我们可以很方便的管理我们所需要的数据.只需要定义好 ...
Mysql+Echarts+Python+Flask实现前后端交互及数据可视化
前言社区版Pycharm实现python+flask+echarts+Mysql实现简单的前后端交互. 新手入门,记录经验,欢迎交流. 一.首先检测Flask框架是否成功? 首先,在你的项目下中安装 ...
Python前后端交互（ Flask Ajax ）
本文是自己学习Python前后端交互记录使用,之前没有学习过Python任何框架,前端也是简单学了一下,如哪里有问题,还望大家批评改正. 1. 前端 1.1 HTML布局这个就不用说啥了,登录长啥样 ...
前后端交互，网络请求
这边文章主要根据我自己的前端开发工作经验,东拼西凑出来的一点理解,希望能够对大家有点帮助,如果有误导或者错误的地方还请帮助指正,感谢!!! 前后端交互我理解主要分为三个主要的部分: 1.客户端 2.服 ...
echarts前后端交互数据_SpringBoot2.0实战（26）整合SpringSecurity前后端分离JSON交互...
在前端的文章中,我们实现了使用 SpringSecurity 实现登录鉴权,并使用数据库存储用户信息,实现登录鉴权 SpringBoot2.0实战(24)整合SpringSecurity之最简登录方法 ...
[原创]前后端交互的方式整理
前言本来我只是想整理下前后端如何传输数据这种交互过程,大概流程如下: 前台使用ajax通过get/post等方式提交数据到后端后端如何获取参数经过业务处理后,返回前端对应的响应数据前端接受到响 ...
写给刚入门的前端工程师的前后端交互指南
转自原文写给刚入门的前端工程师的前后端交互指南作为刚接触前端的不久的童鞋,大家都会兴奋于CSS和JS所带来漂亮界面,然而,前端工程师除了UI重构外,还有非常重要的职责在正确的区域渲染出服务端的数据 ...
ajax学习----json，前后端交互，ajax
json <script>var obj = {"name": "xiaopo","age": 18,"gender& ...
前后端交互概述与URL地址格式
前后端交互概述与URL地址格式接口调用方式原生ajax 基于jQuery的ajax fetch axios URL地址格式

flask前后端交互

目录

前端

index.html

script.js

后端

app.py

flask前后端交互相关推荐

最新文章

热门文章