【flask】 前后端通信方式 原生js的ajax,总结

前端接收参数

#如果是路径参数如:/auth/<email>
#渲染模版并向html页面传参数
@app.route('/blog/<blog_id>')
def blog_detail(blog_id):
    return render_template('blog_detail.html',blog_id=blog_id)
    
#如果 methods是post说明参数在请求体里面,
request.form['参数key’] 
Request.form.get[‘key']

#如果 methods 是get 说明参数在url路径里面
request.args.get(‘key’)
request.values.get(‘key')

例子是前端需要给邮箱发送验证码。所以需要填写邮箱,然后点击按钮,发送验证码给所填写的邮箱。

前段传递给后段数据(ajax)
这里的例子是js的ajax,js部分逻辑:
首先是获取到按钮,给按钮添加点击事件。点击事件内部逻辑为获取到邮箱输入框中所输入的邮箱,并将其传递给后端。
js中的ajax如果要传递参数,如果是get参数直接在url后面填写即可;如果是post参数,需要在xhr.send()方法后面添加所要传递的参数。参数之间用’&’连接

#发送post参数
xhr.send("email=+email+&username=+username);

整体js代码

window.onload=function(){
    var getVerificationCodeButton = document.getElementById("captcha-btn");
    getVerificationCodeButton.addEventListener('click',function(){
        var inputElement = document.getElementById("exampleInputEmail1");
        var email = inputElement.value;
        //1.创建对象
        const xhr = new XMLHttpRequest();
        //2.初始化xhr对象
        xhr.open('POST','/auth/sendVerificationCode');
        //设置请求头
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //固定语法
        //3.发送请求,在这里,可以传请求体参数
        xhr.send("email="+email);
        //4.事件绑定 处理服务器端返回的结果
        //on when
        //readystate是xhr对象中的属性,表示状态
        //0未初始化,刚开始
        //1表示open调用完毕,2表示send方法调用完毕
        //3表示服务端返回部分结果,4表示返回全部结果
        xhr.onreadystatechange = function(){
            //判断服务器已经返回了所有结果
            if(xhr.readyState === 4){
                if(xhr.status >= 200 && xhr.status<300){
                    //处理结果 行 头 空行 体
                    console.log(xhr.status);//响应状态码
                    console.log(xhr.statusText);//状态字符串
                    console.log(xhr.getAllResponseHeaders);//所有响应头
                    console.log(xhr.response);//响应体
                }
            }
        }
    })
}

后端接收参数代码

#发送验证码到邮箱 —这个auth是使用蓝图的哦
@auth.route("/sendVerificationCode",methods=["POST","GET"])
def send_verification_code():
    email = request.form.get("email")
    print(email)
    message = Message(subject="发送验证码测试", recipients=[email], body="邮箱发送验证码测试");
    mail.send(message);
    return "发送验证码"

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/905342.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

国产数据库之Vastbase海量数据库 G100

海量数据库Vastbase是基于openGauss内核开发的企业级关系型数据库。其语法和Oracle数据库很像&#xff0c;基本是从Oracle数据库迁移到海量数据库&#xff0c;以下简单介绍入门的使用 1、建库操作 地址&#xff1a;x.x.x.x root/Qa2021 安装路径&#xff1a;/home/vastbase 创…

进程、孤儿进程、僵尸进程、fork、wait简介

进程相关概念 程序和进程 程序&#xff1a;是指编译好的二进制文件&#xff0c;在磁盘上&#xff0c;占用磁盘空间, 是一个静态的概念. 进程&#xff1a;一个启动的程序&#xff0c; 进程占用的是系统资源&#xff0c;如&#xff1a;物理内存&#xff0c;CPU&#xff0c;终端等…

【万兴科技-注册_登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

【笔记】数据结构与算法

参考链接&#xff1a;数据结构(全) 参考链接&#xff1a;数据结构与算法学习笔记 一些PPT的整理&#xff0c;思路很不错&#xff0c;主要是理解角度吧&#xff0c;自己干啃书的时候结合一下会比较不错 0.总论 1.数据 注&#xff1a;图是一种数据结构&#xff01;&#xff01;…

匿名内部类的理解

这个知识点困惑我很久&#xff0c;前几天面试的时候也问到了&#xff0c;没回答出来 首先先说说使用步骤吧 1.有一个接口&#xff0c;且含有一个抽象方法&#xff08;通常情况我们不会写abstract关键字&#xff0c;冗余的&#xff09; 2.然后有一个外部类&#xff08;Anonymo…

深入探索电能消耗数据:基于机器学习的分析与洞察

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

架构的本质之 MVC 架构

前言 程序员习惯的编程方式就是三步曲。 所以&#xff0c;为了不至于让一个类撑到爆&#x1f4a5;&#xff0c;需要把黄色的对象、绿色的方法、红色的接口&#xff0c;都分配到不同的包结构下。这就是你编码人生中所接触到的第一个解耦操作。 分层框架 MVC 是一种非常常见且常…

突破挑战,创新前行 | 生信科技SOLIDWORKS 2025新品发布会·合肥站精彩回顾

2024年10月18日&#xff0c;由生信科技举办的首场SOLIDWORKS 2025新产品发布会在安徽合肥圆满落幕。现场邀请到制造业的专家学者们一同感受SOLIDWORKS 2025最新功能&#xff0c;探索制造业数字化转型之路。 合肥站活动日&#xff0c;由生信科技副总经理徐建开场。他以智造无界&…

鸿蒙HarmonyOS应用开发者(基础+高级)认证

文章目录 鸿蒙HarmonyOS应用开发者(基础高级)认证&#x1f449;1.HarmonyOS认证介绍1.1、HarmonyOS发展历程1.2、HarmonyOS NEXT 开发预览版1.3、ArkTS语言开发鸿蒙应用1.4、HarmonyOS应用开发者基础认证的核心内容1.5、HarmonyOS应用开发者高级认证的核心内容1.6、HarmonyOS应…

三菱变频器A800\F800\D700E700\CS80等系列变频器选件一览

配备了丰富的选配件&#xff0c;可以提升变频器的性能、增加功能、支持更多的安装方式等。 变频器和外围设备 选件表

精准提炼 | SOLIDWORKS 2025:工程图与钣金焊件新功能

SOLIDWORKS 每年的更新都致力于提升用户的设计效率与体验&#xff0c;SOLIDWORKS 2025 同样带来了众多改进&#xff0c;下面让我们快速了解一下在SOLIDWORKS 2025 工程图与钣金焊件方面的新功能。 工程图相关 一、表面粗糙度符号标注 新版本现在将符合更新 ISO 标准 (ISO 21…

SpringBoot核心框架之AOP详解

SpringBoot核心框架之AOP详解 一、AOP基础 1.1 AOP概述 AOP&#xff1a;Aspect Oriented Programming&#xff08;面向切面编程&#xff0c;面向方面编程&#xff09;&#xff0c;其实就是面向特定方法编程。 场景&#xff1a;项目部分功能运行较慢&#xff0c;定位执行耗时…

【万户软件-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…

HBuilder X 中Vue.js基础使用4->表单输入绑定(三)

表单绑定是实现动态数据双向绑定的重要部分&#xff0c;它让开发者可以轻松地管理和响应用户输入。本文将详细介绍如何在Vue 3中利用v-model指令以及一些特定修饰符来处理不同类型的表单输入。 v-model双向数据绑定 Vue的 v-model 指令提供了双向绑定的功能&#xff0c;key在…

动态规划-回文串问题——647.回文子串

1.题目解析 题目解析&#xff1a;647.回文子串——力扣 测试用例 2.算法原理 1.状态表示 本题需要判断一段字符串是否为回文子串&#xff0c;因此最简单的方法就是保存起开始位置与结束位置&#xff0c;那么就需要一个二维的dp表来保存一段字符串是否为回文子串&#xff0c;…

AI绘画王者归来!SD恐怖如斯!Facebook最强人体分割大师Sapiens 吊打SAM2,亦可Pose,Depth,Normal,ComfyUI

在AI绘画领域&#xff0c;SD恐怖如斯和Facebook的Sapiens模型一直是业界关注的焦点。而最近&#xff0c;Sapiens模型凭借其强大的人体分割能力&#xff0c;再次成为AI绘画领域的佼佼者。 SD恐怖如斯和Sapiens模型的优势 SD恐怖如斯是一款基于深度学习的AI绘画模型&#xff0c;…

Redis-06 Redis复制

主&#xff1a; 192.168.248.132 6379 从1&#xff1a; 192.168.248.140 6380 从2&#xff1a; 192.168.248.139 6381 1.三大命令 拷贝一个新的redis.conf&#xff08;出厂默认&#xff0c;没修改的&#xff09;的文件 2.配置详情 2.1 改为yes 2.2 87行注释掉 2.3 改为no …

什么是成品系统源码,哪里有成品源码,成品源码二次开发需要多久?

成品系统源码指的是已经开发完成、可以立即部署或根据需求进行二次开发的软件系统源代码。这些源码通常包括但医疗信息化软件&#xff08;如HIS、LIS、PACS等&#xff09;、智慧工地源码、家政预约上门系统、实验室管理系统、定位系统源码以及生产管理系统等。 1、医疗信息化软…

[OceanBase-不止于记录]:揭秘双引擎战略,共探AI时代数据架构未来

前言 又到了一年一度大家最爱的探会文章&#xff0c;非常荣幸收到OceanBase官方的邀请参加2024 OceanBase 年度发布会&#xff0c;作为一个经常参加线下探会的博主&#xff0c;每一次体验都有所不同&#xff0c;每一次新技术的突破都让人感到无比兴奋。同时&#xff0c;作为数…

ELK之路第三步——日志收集筛选logstash和filebeat

logstash和filebeat&#xff08;偷懒版&#xff09; 前言logstash1.下载2.修改配置文件3.测试启动4.文件启动 filebeat1.下载2.配置3.启动 前言 上一篇&#xff0c;我们说到了可视化界面Kibana的安装&#xff0c;这一篇&#xff0c;会简单介绍logstash和filebeat的安装和配置。…