jquery写的登录页面
时间: 2023-10-31 15:21:25 浏览: 35
以下是一个简单的使用jQuery实现登录页面的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>登录页面</title>
<meta charset="UTF-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#login-btn").click(function() {
var username = $("#username").val();
var password = $("#password").val();
if (username == "") {
alert("请输入用户名!");
} else if (password == "") {
alert("请输入密码!");
} else {
$.ajax({
url: "login.php", //替换为实际的登录接口
type: "POST",
data: {"username": username, "password": password},
success: function(data) {
if (data == "success") {
alert("登录成功!");
window.location.href = "home.html"; //替换为实际的登录成功跳转页面
} else {
alert("用户名或密码错误!");
}
},
error: function() {
alert("登录失败,请重试!");
}
});
}
});
});
</script>
</head>
<body>
<h1>欢迎登录</h1>
<div>
<label>用户名:</label>
<input type="text" id="username">
</div>
<div>
<label>密码:</label>
<input type="password" id="password">
</div>
<button id="login-btn">登录</button>
</body>
</html>
```
上述代码中使用了jQuery的`$.ajax()`方法发送异步请求,将用户名和密码提交给服务器进行验证。如果验证成功,跳转到指定的页面;否则提示用户用户名或密码错误。需要注意的是,实际的登录接口需要根据实际需求进行替换。