利用Ajax编程设计用户登录页面显示问候语如“用户liming,你好!”,否则显示“用户名或密码错误,请重新输入”
时间: 2024-03-11 21:50:56 浏览: 74
登陆界面Demo:使用用户名和密码登陆,包含Ajax异常请求
好的,这里我提供一个简单的示例,基于jQuery和PHP实现。
HTML代码:
```
<div id="login-form">
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<br>
<button id="login-btn">登录</button>
</div>
<div id="login-result"></div>
```
JavaScript代码:
```
$(function() {
// 点击登录按钮
$('#login-btn').on('click', function() {
// 获取用户名和密码
var username = $('#username').val();
var password = $('#password').val();
// 发送Ajax请求
$.ajax({
url: 'login.php',
type: 'post',
data: {
username: username,
password: password
},
success: function(data) {
// 显示登录结果
$('#login-result').html(data);
}
});
});
});
```
PHP代码:
```
<?php
// 连接数据库
$conn = mysqli_connect('localhost', 'root', 'password', 'database');
// 获取用户名和密码
$username = $_POST['username'];
$password = $_POST['password'];
// 查询用户信息
$sql = "SELECT * FROM users WHERE username='$username' AND password='$password'";
$result = mysqli_query($conn, $sql);
// 判断登录结果
if (mysqli_num_rows($result) > 0) {
// 登录成功,显示问候语
echo '用户' . $username . ',你好!';
} else {
// 登录失败,显示错误信息
echo '用户名或密码错误,请重新输入。';
}
// 关闭数据库连接
mysqli_close($conn);
?>
```
这个示例仅供参考,实际上还需要对用户输入进行安全性检查和处理,比如防止SQL注入攻击等。如果你使用的是其他的技术栈,可以根据以上思路进行相应的调整和实现。
阅读全文