使用ajax可以实现局部请求，局部更新。而不是整个页面都更新。
ajax各个参数说明：
url：发送给后台目标路由url
type:请求方法 post 或者get
dataType: 后台希望返回的数据格式 比如 json 不指定也可以，会自动识别
success：是后台处理的视图函数成功执行后返回执行的回调函数
error：后台没有成功处理所执行的回调函数
补充： statusCode 响应对象的状态码，比如 500 就是后台服务器错误，就可以执行相应的函数处理。
$.ajax{
url:url,
type:'post/get',
data:data,
dataType:dataType,
success:function(){
//
},
error:function(){
//
}，
ststusCode:{
500:function(){
//
}
}
}
1.GET请求下传参数，
这是个发送验证码的例子
function send_email(){
var email=$("#email").val();
var yanzhengma=$("#yanzhengma").val();
var reg=/[1-9][0-9]{4,9}@qq.com/;
<!--json数据传到后台!-->
var my_data = {
data: JSON.stringify({
"email":email,
"yanzhengma":yanzhengma,
})
};
<!--匹配qq邮箱!-->
console.log(reg.test(email));
if (email!=='') {
if(reg.test(email)) {
$.ajax({
type: "GET",
url: "/send",
data:my_data,
success: function (randomnber) {
alert("你的东风导弹发送成功,3s后到达！！！");
},
error: function () {
alert("发送失败，服务器连接失败！！！");
}
});
}else{
alert('qq号码格式不正确！！！')
}
}else{
alert('邮箱不能是空的！！！')
}
}
flask后台使用获取传入的参数
使用request.args.get(’ ')
flask后台：
@app.route('/send',methods=['GET'])
def send():
if request.method=="GET":
#获取前台的数据
data= request.args.get("data")
#反序列化前台传送过来的json数据 实质变为dict python可操作的
json_data=json.loads(data)
to=json_data['email']
# 发送验证码
global randomnber
randomnber = randomnumber()
sendqqmail(to, "<h3>验证你的电子邮件地址</h3>"
"<p>你的验证码是:{rdommnumber}</p><p>详情请看:</p><a>http:www.baidu.com</a>".format(rdommnumber=randomnber))
return randomnber
else:
return redirect('/register')
2. POST请求下传参数
这是一个注册的例子
function register() {
takePhoto();
var telephone=$("#telephone").val();
var pwd=$("#password1").val();
var pwd2=$("#password2").val();
var email=$("#email").val();
var yanzhengma=$("#yanzhengma").val();
<!--需要传入的参数以json格式传入!-->
my_data={
"telephone":telephone,
"pwd":pwd,
"email":email,
"yanzhengma":yanzhengma};
if(pwd!==pwd2){
alert('密码不相等，请重新输入')
}else{
$.ajax({
url:'/register/',
type:"POST",
<!--需要传入的参数!-->
data:my_data,
success:function(data){
if (data.status==="0"){
alert("该用户已注册，重新注册！！！")
}else if(data.status==="-1"){
alert("验证码不正确！！！请重新获取验证码！！！")
}else if(data.status==="1"){
window.location.href="/face_login";
}else{
alert('崩溃le ');
}
},
error:function(){
alert('注册失败')
}
});
}
}
flask后台：使用request.form.get(’’)来获取前端传入的参数
这里使用了个小技巧，返回一个data对象，放了个属性status 通过status的判断，前端js可以相应的表现。
比如这里 当status为0时，返回data对象，前端判断status=0时，表示用户已经注册
@app.route("/register/", methods=["GET", "POST"])
def register():
if request.method == "GET":
return render_template("auth/register.html")
else:
# 获取表单数据
telephone = request.form.get("telephone")
password1=request.form.get("pwd")
email=request.form.get("email")
yanzhengma=request.form.get('yanzhengma')
# 手机号码验证，如果数据库中不存在 就允许注册
user = User.query.filter(User.telephone == telephone).first()
if user:
data=json.dumps({
"status":"0"})
return Response(data,mimetype="application/json")
else:
if yanzhengma!=randomnber:
data=json.dumps({
"status":"-1"})
return Response(data,mimetype="application/json")
else:
#添加到数据库
user = User(telephone=telephone, email=email, password=password1)
db.session.add(user)
db.session.commit()
# 注册成功添加电话号码到session
session['telephone'] = telephone
data =josn.dumps( {
"status": "1"})
return Response(data,mimetype="application/json")
3. flask后台返回数据到前台
flask默认不会处理dict list等数据为json格式需要自己处理并返回给前台
方法1:
使用json标准模块 json.dumps()
缺点 虽说这样返回给前台没多大的错误 但是浏览器还是认为是text/html格式的数据
因为浏览器处理的数据是一个Response对象 因此指定mimetype=“application/json”就可以了
data =josn.dumps( {"status": "1"})
return Response(data,mimetype="application/json")
效果图
方法2：
使用flask封装好的 jsonify
data=jsonify({"status":"1"})
方法3：
使用自定义的Response
有时候不需要每次都使用jsonify包装json数据，当有一些数据不是json时 会报错，那么我们就用force_type()处理
继承Response类，自定义一个类，处理非法数据
from flask import Flask, Response, jsonify
class MyResponse(Response):
@classmethod
def force_type(cls, response, environ=None):
if isinstance(response, (list, dict)):
response = jsonify(response)
return super(Response, cls).force_type(response, environ)
app = Flask(__name__)
app.response_class = MyResponse
@app.route('/')
def root():
t = {
'a': 1,
'b': 2,
'c': [3, 4, 5]
}
return t
if __name__ == '__main__':
app.debug = True
app.run()