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

前端接收参数

python 复制代码
#如果是路径参数如:/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()方法后面添加所要传递的参数。参数之间用'&'连接

python 复制代码
#发送post参数
xhr.send("email="+email+"&username="+username);

整体js代码

python 复制代码
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);//响应体
                }
            }
        }
    })
}

后端接收参数代码

python 复制代码
#发送验证码到邮箱 ---这个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 "发送验证码"
相关推荐
新子y32 分钟前
【小白笔记】「while」在程序语言中的角色
笔记·python
java1234_小锋41 分钟前
[免费]基于Python的YOLO深度学习垃圾分类目标检测系统【论文+源码】
python·深度学习·yolo·垃圾分类·垃圾分类检测
野犬寒鸦1 小时前
从零起步学习MySQL || 第十章:深入了解B+树及B+树的性能优势(结合底层数据结构与数据库设计深度解析)
java·数据库·后端·mysql·1024程序员节
上进小菜猪1 小时前
智能信创新范式:浙江省人民医院的全栈国产化与智能数据底座实践
后端
凌晨一点的秃头猪1 小时前
面向对象和面向过程 编程思想
python
总有刁民想爱朕ha2 小时前
银河麒麟v10批量部署Python Flask项目小白教程
开发语言·python·flask·银河麒麟v10
没有bug.的程序员2 小时前
Spring 常见问题与调试技巧
java·后端·spring·动态代理·1024程序员节
黎燃2 小时前
构筑自主可控医疗生态-数智融合新引擎-医疗全栈信创跃迁
后端
Python×CATIA工业智造3 小时前
Python函数包装技术详解:从基础装饰器到高级应用
python·pycharm
R.lin3 小时前
OSS服务模块-基于数据库配置的Java OSS服务解决方案,支持MinIO、七牛云、阿里云和腾讯云
java·数据库·后端·mysql