flask 在登录页面使用ajax,并显示表单错误信息

    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
        <form id="loginform" method="POST" >
            <table>
                {{ form.hidden_tag() }}
                <tr>
                    <td>
                        邮箱
                    </td>
                    <td>
                        {{ form.email }}
                    </td>
                </tr>
                <tr>
                    <td>
                        密码
                    </td>
                    <td>
                        {{ form.password }}
                    </td>
                </tr>
                <tr>
                    <td>
                        记住我
                    </td>
                    <td>
                        {{ form.remember_me }}
                    </td>
                </tr>
            </table>

            <button type="button" id="btn">提交</button>
        </form>
    <script>
        $(function () {
            $('#btn').click(function () {
                //ajax提交
                post_data = $('#loginform').serialize();
                $.ajax({
                    url: "/login",
                    type: 'POST',
                    data: post_data,
                    success: function (data) {
                        if (data.status == 200) {
                            window.location = '/'
                        }
                        else {
                            alert(data.message)
                        }
                    }
                });
            });
        });
    </script>

上面是html中的部分代码
下面是表单的代码

class LoginForm(FlaskForm):
    email = StringField('邮箱', validators=[DataRequired(message='邮箱不能为空'), Length(1, 64, message='邮箱地址长度不合适'),
                                          Email(message='邮箱不合法')])
    password = PasswordField('密码', validators=[DataRequired(message='密码不能为空')])
    remember_me = BooleanField('记住我')
    submit = SubmitField('登录')

    def get_errors(self):
        errors = ''
        for v in self.errors.values():
            for m in v:
                errors += m
            errors += '\n'
        return errors

因为我这表单是由普通的post请求更改过来的,所以看起来比较怪,正常是在html中定义表单,在form中验证表单,我这里偷懒。。。
我在LoginForm中定一了一个方法,用来获得表单验证失败后所有的错误信息。因为我只是在登录页面实现了ajax功能,如果很多页面都需要ajax,可以将get_errors()放在一个单独的BaseForm中,每个需要这个功能的表单,直接继承这个BaseForm就可以了。
下面时view中的代码

@auth.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if request.method == 'GET':
        return render_template('auth/login_test.html', form=form)
    if form.validate_on_submit():
        user = User.query.filter_by(email=form.email.data).first()
        if user is not None and user.verify_password(form.password.data):
            login_user(user, form.remember_me.data)
            return jsonify({'status': 200})
        return jsonify({'status': 400, 'message': '用户名和密码不匹配'})
    message = form.get_errors()
    return jsonify({'status': 400, 'message': message}

请求进来时,判断请求类型,若是get请求,则返回html文件,并将form传到html;若是post请求,则首先做表单验证,验证不通过,通过get_errors()方法获得所有的错误信息并返回,表单验证通过则进行用户名和密码的验证,全部通过验证后,返回状态码200,ajax在判断status=200后会自动访问呢首页。

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简的示例,使用 Flask 作为后台框架,Ajax 实现异步提交,HTML 和 Bootstrap 实现页面布局和样式。 首先,创建一个 Flask 应用,设置路由和视图函数。 ```python from flask import Flask, render_template, request, jsonify app = Flask(__name__) @app.route('/') def index(): return render_template('login.html') @app.route('/login', methods=['POST']) def login(): username = request.form['username'] password = request.form['password'] if username == 'admin' and password == '123456': return jsonify({'success': True}) else: return jsonify({'success': False, 'message': '用户名或密码错误'}) ``` 然后,创建一个 HTML 文件,包含登录Ajax 提交代码。 ```html <!DOCTYPE html> <html> <head> <title>后台登录</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row justify-content-md-center mt-5"> <div class="col-md-6"> <h3 class="text-center mb-4">后台登录</h3> <form id="login-form"> <div class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" id="username" name="username" required> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" id="password" name="password" required> </div> <button type="submit" class="btn btn-primary btn-block">登录</button> </form> </div> </div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function() { $('#login-form').submit(function(event) { event.preventDefault(); $.ajax({ url: '/login', type: 'POST', data: $(this).serialize(), dataType: 'json', success: function(data) { if (data.success) { window.location.href = '/dashboard'; } else { alert(data.message); } }, error: function() { alert('登录失败,请重试'); } }); }); }); </script> </body> </html> ``` 最后,启动应用并访问 http://localhost:5000/ 即可看到登录界面。 注意:这只是一个简的示例,实际应用中需要做更多的安全处理,比如密码加密、防止 CSRF 攻击等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值