以下是一个使用Flask、AJAX和HTML/CSS/JS实现的简单注册登录系统的例子。
首先，安装Flask:
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('/api/register', methods=['POST'])
def register():
# 注册逻辑，这里仅打印信息示例
username = request.json.get('username')
password = request.json.get('password')
print(f'User {username} registered with password {password}')
return jsonify({'message': 'Registered successfully!'}), 200
@app.route('/api/login', methods=['POST'])
def login():
# 登录逻辑，这里仅打印信息示例
username = request.json.get('username')
password = request.json.get('password')
print(f'User {username} logged in with password {password}')
return jsonify({'message': 'Logged in successfully!'}), 200
if __name__ == '__main__':
app.run(debug=True)
在同一目录下创建static文件夹，用于存放CSS和JS文件。然后在static/css下创建style.css，在static/js下创建script.js，并在templates文件夹下创建index.html。
static/css/style.css:
/* 这里添加CSS样式 */
static/js/script.js:
// 使用jQuery发送AJAX请求
$(document).ready(function() {
$('#registerForm').submit(function(e) {
e.preventDefault();
var data = {
username: $('#registerUsername').val(),
password: $('#registerPassword').val()
};
$.ajax({
type: 'POST',
url: '/api/register',
contentType: 'application/json',
data: JSON.stringify(data),
success: function(response) {
alert(response.message);
},
error: function(xhr) {
alert("An error occurred!");
}
});
});
$('#loginForm').submit(function(e) {
e.preventDefault();
var data = {
username: $('#loginUsername').val(),
password: $('#loginPassword').val()
};
$.ajax({
type: 'POST',