web前端开发 登录用户名和密码成功之后跳转网页 并且还包含自动登录的相关代码
时间: 2023-09-08 09:12:23 浏览: 53
好的,下面是一个示例,实现了输入用户名和密码、提交登录请求、登录成功后跳转页面并保存登录信息的功能:
HTML部分:
```html
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="登录" onclick="return login();">
</form>
```
JavaScript部分:
```javascript
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 发送登录请求,以下是示例代码
if (username === "admin" && password === "123456") {
// 登录成功,保存登录信息,以下是示例代码
localStorage.setItem("username", username);
localStorage.setItem("password", password);
// 跳转到首页
window.location.href = "index.html";
return true;
} else {
alert("用户名或密码错误!");
return false;
}
}
```
以上代码实现了以下功能:
- 用户输入用户名和密码后点击登录按钮,会发送登录请求;
- 如果用户名和密码正确,则保存登录信息(使用 `localStorage` 实现),并跳转到首页;
- 如果用户名或密码错误,则弹出提示框,不跳转。
注意:以上代码仅为示例代码,实际应用中需要根据具体情况进行修改和完善。另外,自动登录的实现方式可以使用 cookie 或者 sessionStorage 等其他方式。