Flask 通过ajax实现用户登录的简单案例

以下是一个使用Flask和AJAX实现用户登录的简单案例。

首先，安装必要的包：




pip install Flask

然后，创建一个简单的Flask应用：




from flask import Flask, render_template, request, jsonify
 
app = Flask(__name__)
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/login', methods=['POST'])
def login():
    username = request.json.get('username')
    password = request.json.get('password')
 
    # 这里简单处理，实际应用应该查询数据库并验证用户名和密码
    if username == 'user' and password == 'pass':
        return jsonify({'status': 'success', 'message': '登录成功'})
    else:
        return jsonify({'status': 'error', 'message': '用户名或密码错误'})
 
if __name__ == '__main__':
    app.run(debug=True)

接下来，创建一个HTML模板文件 index.html：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Example</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div>
        <input type="text" id="username" placeholder="Username">
        <input type="password" id="password" placeholder="Password">
        <button id="login-btn">登录</button>
    </div>
 
    <script>
        $(document).ready(function() {
            $('#login-btn').click(function() {
                var username = $('#username').val();
                var password = $('#password').val();
 
                $.ajax({
                    url: '/login',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        username: username,
                        password: password
                    }),
                    success: function(response) {
                        alert(response.message);
                    },
                    error: function(xhr, status, error) {
                        alert("登录失败：" + xhr.responseJSON.message);
                    }
                });
            });
        });
    </script>
</body>
</html>

在这个例子中，我们使用了jQuery来简化AJAX的使用。当用户点击登录按钮时，输入框中的用户名和密码会通过AJAX发送到 /login 路由。服务器端的登录函数会处理这个请求，并返回JSON格式的响应。客户端根据服务器的响应显示相应的提示信息。

Flask 通过ajax实现用户登录的简单案例

评论已关闭

推荐阅读