基于jquery写一个简单登录页面
时间: 2023-05-13 12:06:44 浏览: 218
好的,以下是一个基于 jQuery 的简单登录页面的示例代码:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>登录页面</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<h1>欢迎登录</h1>
<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="button" id="loginBtn" value="登录">
</form>
<div id="result"></div>
<script src="login.js"></script>
</body>
</html>
```
JavaScript 代码(login.js):
```
$(document).ready(function() {
$('#loginBtn').click(function() {
var username = $('#username').val();
var password = $('#password').val();
if (username == '' || password == '') {
$('#result').html('用户名和密码不能为空!');
} else {
$.ajax({
url: 'login.php',
type: 'POST',
data: {username: username, password: password},
success: function(data) {
if (data == 'success') {
$('#result').html('登录成功!');
} else {
$('#result').html('用户名或密码错误!');
}
},
error: function() {
$('#result').html('登录失败,请稍后再试!');
}
});
}
});
});
```
请注意,这只是一个简单的示例代码,实际的登录页面需要更多的安全性和验证。
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.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)