使用原生AJAX完成登录页面验证异步交互效果,不要使用php
时间: 2024-05-15 21:16:21 浏览: 16
以下是使用原生AJAX完成登录页面验证异步交互效果的示例代码:
HTML代码:
```
<form id="login-form" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="submit" value="Login">
</form>
<div id="message"></div>
```
JavaScript代码:
```
// 获取表单和消息元素
const loginForm = document.getElementById('login-form');
const message = document.getElementById('message');
// 监听表单提交事件
loginForm.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交行为
// 获取用户名和密码
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 创建XHR对象
const xhr = new XMLHttpRequest();
// 监听XHR的状态变化
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 登录成功,显示成功消息
message.innerHTML = 'Login successful!';
message.classList.remove('error');
message.classList.add('success');
} else {
// 登录失败,显示错误消息
message.innerHTML = 'Invalid username or password.';
message.classList.remove('success');
message.classList.add('error');
}
}
};
// 发送POST请求
xhr.open('POST', '/login');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(`username=${username}&password=${password}`);
});
```
注意,以上代码仅用于示范AJAX的基本使用方法,实际开发中还需要进行安全性和错误处理等方面的优化。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)