使用原生AJAX完成登录页面验证异步交互效果
时间: 2023-10-15 14:07:16 浏览: 34
很抱歉,作为AI语言模型,我无法演示AJAX的异步交互效果。以下是一个基本的登录页面验证的AJAX实现示例,供参考:
HTML代码:
```
<form id="login-form" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
<div id="message"></div>
```
JavaScript代码:
```
// 获取表单元素
const form = document.getElementById('login-form');
const username = document.getElementById('username');
const password = document.getElementById('password');
const message = document.getElementById('message');
// 添加表单提交事件监听器
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止默认提交行为
// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 添加状态变化事件监听器
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
if (response.success) {
message.innerHTML = 'Login successful';
} else {
message.innerHTML = 'Invalid username or password';
}
} else {
message.innerHTML = 'Server error';
}
}
};
// 设置请求参数
const url = 'login.php';
const params = 'username=' + username.value + '&password=' + password.value;
// 发送POST请求
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(params);
});
```
服务器端代码(PHP):
```
<?php
// 获取POST参数
$username = $_POST['username'];
$password = $_POST['password'];
// 模拟登录验证
if ($username === 'admin' && $password === '123456') {
$response = array('success' => true);
} else {
$response = array('success' => false);
}
// 返回JSON格式响应
header('Content-type: application/json');
echo json_encode($response);
?>
```