jquery和bootstrap的登录页面
时间: 2023-09-22 10:07:44 浏览: 39
这是一个基于jQuery和Bootstrap的简单登录页面的示例代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login Page</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card mt-5">
<div class="card-body">
<h2 class="card-title text-center">Login</h2>
<form id="loginForm">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<button type="submit" class="btn btn-primary btn-block">Login</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script>
$(function() {
// 监听表单提交事件
$('#loginForm').on('submit', function(e) {
e.preventDefault();
// 获取用户名和密码
var username = $('#username').val();
var password = $('#password').val();
// 发送登录请求
$.ajax({
url: '/login',
type: 'POST',
data: {
username: username,
password: password
},
success: function(data) {
// 登录成功,跳转到首页
window.location.href = '/';
},
error: function(xhr, textStatus, errorThrown) {
// 登录失败,显示错误信息
alert(xhr.responseText);
}
});
});
});
</script>
</body>
</html>
```
这个示例代码包含了一个基本的登录表单,使用了Bootstrap的样式来美化页面。在表单提交时,会通过Ajax发送登录请求。这里只是一个示例,实际的登录请求需要根据具体的后端实现进行调整。
同时,需要注意的是,这个示例代码并没有进行任何的安全验证,实际使用时需要加强安全性。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)