用js实现登录成功。这是html: <div class="form-container sing-in-container"> <form class="sign-in-form"> <h1>用户登录 </h1> <span>用户名/QQ邮箱登录</span> <input type="text" class="login-name" placeholder="QQ邮箱"> <input type="password" class="password" placeholder="密码"> <a href="#">忘记密码?</a> <button type="submit" onclick="signInSuccess()">登录</button> </form> </div>
时间: 2023-06-25 09:02:57 浏览: 154
首先,你需要在后端实现一个接口来验证用户输入的用户名和密码是否正确。然后,在前端的 `onclick` 事件中调用该接口,并根据接口返回的结果进行相应的处理。
以下是一个简单的示例代码:
```javascript
function signInSuccess() {
// 获取登录表单中的用户名和密码
const username = document.querySelector('.login-name').value;
const password = document.querySelector('.password').value;
// 发送登录请求
fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username, password })
})
.then(response => {
if (response.ok) {
// 登录成功,跳转到首页
window.location.href = '/';
} else {
// 登录失败,显示错误信息
alert('用户名或密码错误');
}
})
.catch(error => console.error(error));
}
```
这段代码中,我们使用了 `fetch` 函数来发送登录请求,并在响应成功时跳转到首页,在响应失败时显示错误信息。在实际使用中,你需要根据自己的业务逻辑来进行相应的修改。
阅读全文