生成login.html代码
时间: 2023-08-12 13:04:37 浏览: 77
好的,下面是一个简单的 login.html 代码示例,使用了 Bootstrap 框架美化了页面:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<!-- 引入 Bootstrap 样式 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row justify-content-center mt-5">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="mb-0">Login</h3>
</div>
<div class="card-body">
<form class="form" role="form" autocomplete="off">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control form-control-lg rounded-0" name="username" id="username" required="">
<div class="invalid-feedback">Oops, you missed this one.</div>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control form-control-lg rounded-0" id="password" required="">
<div class="invalid-feedback">Enter your password too!</div>
</div>
<button type="submit" class="btn btn-success btn-lg float-right" id="btnLogin">Login</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- 引入 jQuery 和 Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<!-- 自定义脚本 -->
<script>
$(function () {
// 提交登录请求
$("#btnLogin").on("click", function (event) {
event.preventDefault();
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
url: "/login",
method: "POST",
contentType: "application/json",
data: JSON.stringify({
"username": username,
"password": password
}),
success: function (result) {
if (result.success) {
window.location.href = "/dashboard";
} else {
alert(result.msg);
}
}
});
});
});
</script>
</body>
</html>
```
上述代码演示了如何使用 Bootstrap 样式创建一个简单的登录页面,并使用 jQuery 发送登录请求。需要注意的是,这里的代码仅为示例,实际应用中需要根据具体需求进行修改和优化。