61 lines
2.1 KiB
JavaScript
61 lines
2.1 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
// 获取登录表单及按钮
|
|
const loginForm = document.querySelector('.login-form');
|
|
const loginButton = document.querySelector('.login-btn');
|
|
const usernameInput = document.getElementById('username');
|
|
const passwordInput = document.getElementById('password');
|
|
|
|
// 在点击登录按钮时提交表单
|
|
loginButton.addEventListener('click', function(event) {
|
|
event.preventDefault(); // 防止表单的默认提交行为
|
|
|
|
// 获取输入框的值
|
|
const username = usernameInput.value.trim();
|
|
const password = passwordInput.value.trim();
|
|
|
|
// 检查输入框是否为空
|
|
if (!username || !password) {
|
|
alert('用户名和密码不能为空');
|
|
return;
|
|
}
|
|
|
|
// 显示加载提示
|
|
loginButton.innerHTML = '登录中...';
|
|
loginButton.disabled = true;
|
|
|
|
// 创建一个请求对象
|
|
const data = {
|
|
username: username,
|
|
password: password
|
|
};
|
|
|
|
// 使用 Fetch API 发送 POST 请求到 Flask 后端
|
|
fetch('/login_post', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(data) // 将数据转换为 JSON 格式发送
|
|
})
|
|
.then(response => response.json()) // 解析响应数据
|
|
.then(data => {
|
|
if (data.success) {
|
|
// 登录成功，跳转到主页
|
|
window.location.href = '/dashboard'; // 根据需要修改跳转的路径
|
|
} else {
|
|
// 登录失败，提示错误信息
|
|
alert('登录失败: ' + data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('登录请求失败，请稍后重试');
|
|
})
|
|
.finally(() => {
|
|
// 恢复按钮状态
|
|
loginButton.innerHTML = '登录';
|
|
loginButton.disabled = false;
|
|
});
|
|
});
|
|
});
|