详解Python flask的前后端交互

目录
  • 前端
    • index.html
    • script.js
  • 后端
    • app.py
  • 总结

场景：按下按钮，将左边的下拉选框内容发送给后端，后端再将返回的结果传给前端显示。

按下按钮之前：

按下按钮之后：

代码结构

这是flask默认的框架（html写在templates文件夹内、css和js写在static文件夹内）

前端

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, request
app = 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)

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • python中使用多线程改进flask案例

    目录 1.线程和进程关系? 2.多线程 3.多进程 前言: 线程是指进程内的一个执行单元,也是进程内的可调度实体. 与进程的区别: (1) 地址空间:进程内的一个执行单元;进程至少有一个线程;它们共享进程的地址空间;而进程有自己独立的地址空间; (2) 资源拥有:进程是资源分配和拥有的单位,同一个进程内的线程共享进程的资源 (3) 线程是处理器调度的基本单位,但进程不是. (4) 二者均可并发执行. 简而言之,一个程序至少有一个进程,一个进程至少有一个线程. 线程的划分尺度小于进程,使得多线程程

  • 浅谈Python flask框架

    浅谈Python flask框架

    目录 1. flask 框架概述 1.1flask 框架优势 1.2flask 框架获取 1.3flask 框架使用 2. flask demo步骤 3. flask 基础功能 3.1路由功能 3.2模版提供 4.总结  前言: Python 面向对象的高级编程语言,以其语法简单.免费开源.免编译扩展性高,同时也可以嵌入到C/C++程序和丰富的第三方库,Python运用到大数据分析.人工智能.web后端等应用场景上. Python 目前主要流行的web框架:flask.Django.Tornad

  • python使用flask与js进行前后台交互的例子

    flask与js进行前后台交互代码如下,后台给前端发数据: python部分: # -*- coding: utf-8 -*- from flask import Flask,jsonify,render_template import json app = Flask(__name__)#实例化app对象 testInfo = {} @app.route('/test_post/nn',methods=['GET','POST'])#路由 def test_post(): testInfo['

  • Python中的flask框架详解

    Flask是一个Python编写的Web 微框架,让我们可以使用Python语言快速实现一个网站或Web服务.本文参考自Flask官方文档,大部分代码引用自官方文档. 安装flask 首先我们来安装Flask.最简单的办法就是使用pip. pip install flask 然后打开一个Python文件,输入下面的内容并运行该文件.然后访问localhost:5000,我们应当可以看到浏览器上输出了hello world. from flask import Flask app = Flask(

  • Python Flask前后端Ajax交互的方法示例

    Python Flask前后端Ajax交互的方法示例

    之前总结过flask里的基础知识,现在来总结下flask里的前后端数据交互的知识,这里用的是Ajax 一. post方法 1.post方法的位置:在前端HTML里,绑定在一个按钮的点击函数里,或者一个鼠标输入框点击离开事件. (1)数据附在URL里(请求路径),发送到后端. /*前端HTML<script>里:*/ $.post("/js_post/"+ip, data_to_backend, function(data){alert("success "

  • 详解Python flask的前后端交互

    详解Python flask的前后端交互

    目录 前端 index.html script.js 后端 app.py 总结 场景:按下按钮,将左边的下拉选框内容发送给后端,后端再将返回的结果传给前端显示. 按下按钮之前: 按下按钮之后: 代码结构 这是flask默认的框架(html写在templates文件夹内.css和js写在static文件夹内) 前端 index.html 很简单的一个select下拉选框,一个按钮和一个文本,这里的 {{ temp }} 是从后端调用的. <html> <head> <meta

  • 详解Python Flask框架的安装及应用

    详解Python Flask框架的安装及应用

    目录 1.安装 1.1 创建虚拟环境 1.2 进入虚拟环境 1.3 安装 flask 2.上手 2.1 最小 Demo 2.2 基本知识 3.解构官网指导 Demo 3.1 克隆与代码架构分析 3.2 入口文件 init.py 3.3 数据库设置 3.4 蓝图和视图 4.其他 5.跑起 DEMO 1.安装 1.1 创建虚拟环境 mkdir myproject cd myproject python3 -m venv venv 1.2 进入虚拟环境 . venv/bin/activate 1.3

  • 详解SpringSecurity如何实现前后端分离

    目录 Spring Security存在的问题 改造Spring Security的认证方式 1. 登录请求改成JSON方式 1.1 新建JSON版Filter - JsonUsernamePasswordAuthenticationFilter 1.2 新建Configurer来注册Filter - JsonUsernamePasswordLoginConfigurer 1.3 将自定义Configurer注册到HttpSecurity上 2. 关闭页面重定向 2.1 当前用户未登录 2.2

  • 详解Python Flask API 示例演示(附cookies和session)

    目录 一.概述 二.常用函数讲解 1)Flask() 函数 2)route() 函数 3)jsonify() 函数 4)render_template() 函数 5)redirect() 函数 6)url_for() 函数 7)before_request() 函数 8)after_request() 函数 9)abort() 函数 10)send_file() 函数 三.常用对象讲解 1)request 对象 2)session 对象 四.Flask 中的 cookies 与 session

  • 详解.net core webapi 前后端开发分离后的配置和部署

    背景:现在越来越多的企业都采用了在开发上前后端分离,前后端开发上的分离有很多种,那么今天,我来分享一下项目中得的前后端分离. B/S Saas 项目:(这个项目可以理解成个人中心,当然不止这么点功能) 前端:node.js + vue 后端:.net core webapi 前端安装 node.js 跟创建vue项目这些不是这篇文章的重点,重点在于项目完成后的部署. .net corewebapi创建后,默认就创建了一个wwwroot的文件夹,这个文件夹是用来放置静态文件的,所以,我们可以理解成

  • 详解springboot和vue前后端分离开发跨域登陆问题

    前后端分离开发中,一般都会遇到请求跨域问题.而且一般也会遇到登陆失效问题.今天就以springboot和vue为例来看如何解决上述问题 增加过滤器 @WebFilter @Component public class CorsFilter implements Filter { @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException,

  • 详解Python中字符串前“b”,“r”,“u”,“f”的作用

    1.字符串前加 u 例:u"我是含有中文字符组成的字符串." 作用: 后面字符串以 Unicode 格式 进行编码,一般用在中文字符串前面,防止因为源码储存格式问题,导致再次使用时出现乱码. 2.字符串前加 r 例:r"\n\n\n\n" 表示一个普通生字符串 \n\n\n\n,而不表示换行了. 作用: 去掉反斜杠的转移机制. (特殊字符:即那些,反斜杠加上对应字母,表示对应的特殊含义的,比如最常见的"\n"表示换行,"\t"

  • 详解python对象之间的交互

    先看看一般的类定义如下: class 类名: def __init__(self,参数1,参数2): self.对象的属性1 = 参数1 self.对象的属性2 = 参数2 def 方法名(self):pass def 方法名2(self):pass 对象名 = 类名(1,2) #对象就是实例,代表一个具体的东西 #类名() : 类名+括号就是实例化一个类,相当于调用了__init__方法 #括号里传参数,参数不需要传self,其他与init中的形参一一对应 #结果返回一个对象 对象名.对象的属

  • python+html实现前后端数据交互界面显示的全过程

    python+html实现前后端数据交互界面显示的全过程

    目录 前言 1.python开发工具 2.项目创建 总结 前言 最近刚刚开始学习如何将python后台与html前端结合起来,现在写一篇blog记录一下,我采用的是前后端不分离形式. 话不多说,先来实现一个简单的计算功能吧,前端输入计算的数据,后端计算结果,返回结果至前端进行显示. 1.python开发工具 我选用的是pycharm专业版,因为社区版本无法创建django程序 2.项目创建 第一步:打开pycharm,创建一个django程序 蓝圈圈起来的为自定义的名字,点击右下角的create

  • 实例详解Python装饰器与闭包

    闭包是Python装饰器的基础.要理解闭包,先要了解Python中的变量作用域规则. 变量作用域规则 首先,在函数中是能访问全局变量的: >>> a = 'global var' >>> def foo(): print(a) >>> foo() global var 然后,在一个嵌套函数中,内层函数能够访问在外层函数中定义的局部变量: >>> def foo(): a = 'free var' def bar(): print(a)

随机推荐