【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 "发送验证码"