利用Ajax编程,改进用户登录页面,通过数据库访问验证用户信息成功则显示问候语,如“用户liming,你好!”,否则显示“用户名或密码错误,请重新输入”
时间: 2024-03-09 13:50:39 浏览: 19
好的,以下是一个简单的实现用户登录验证的 AJAX 例子:
HTML 代码
```
<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>
<button type="button" onclick="login()">登录</button>
</form>
<div id="result"></div>
```
JavaScript 代码
```javascript
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var response = xmlhttp.responseText;
if (response == "success") {
document.getElementById("result").innerHTML = "用户" + username + ",你好!";
} else {
document.getElementById("result").innerHTML = "用户名或密码错误,请重新输入";
}
}
};
xmlhttp.open("POST", "login.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("username=" + username + "&password=" + password);
}
```
PHP 代码
```php
<?php
$username = $_POST["username"];
$password = $_POST["password"];
// 连接数据库,查询用户信息
if ($username == "liming" && $password == "123456") {
echo "success";
} else {
echo "error";
}
?>
```
以上代码是一个简单的 AJAX 实现用户登录验证的例子。当用户输入用户名和密码点击登录按钮后,JavaScript 代码会将用户名和密码通过 POST 请求发送到 PHP 文件中进行验证,如果验证成功,则在页面上显示问候语,否则显示错误信息。