flask---jquery下ajax的使用--传参数

使用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()
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读