(不使用 JQ)ajax增删改查实现登录注册页面
时间: 2023-12-04 09:04:15 浏览: 85
好的,我可以为您提供一个不使用 jQuery 的 Ajax 增删改查实现登录注册页面的示例代码。下面是一个简单的实现:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录注册页面</title>
</head>
<body>
<h1>登录</h1>
<form id="login-form" method="post">
<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 type="submit">登录</button>
</form>
<hr>
<h1>注册</h1>
<form id="register-form" method="post">
<label for="new-username">用户名:</label>
<input type="text" id="new-username" name="new-username"><br>
<label for="new-password">密码:</label>
<input type="password" id="new-password" name="new-password"><br>
<label for="confirm-password">确认密码:</label>
<input type="password" id="confirm-password" name="confirm-password"><br>
<button type="submit">注册</button>
</form>
<script src="index.js"></script>
</body>
</html>
```
JavaScript:
```js
// 获取登录表单和注册表单
const loginForm = document.getElementById('login-form');
const registerForm = document.getElementById('register-form');
// 监听登录表单的提交事件
loginForm.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单默认提交行为
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value.trim();
// 发送登录请求
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:3000/login');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
alert('登录成功!');
} else {
alert('登录失败!');
}
}
};
xhr.send(JSON.stringify({
username,
password,
}));
});
// 监听注册表单的提交事件
registerForm.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单默认提交行为
const newUsername = document.getElementById('new-username').value.trim();
const newPassword = document.getElementById('new-password').value.trim();
const confirmPassword = document.getElementById('confirm-password').value.trim();
// 校验密码是否一致
if (newPassword !== confirmPassword) {
alert('两次输入的密码不一致!');
return;
}
// 发送注册请求
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:3000/register');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
alert('注册成功!');
} else {
alert('注册失败!');
}
}
};
xhr.send(JSON.stringify({
username: newUsername,
password: newPassword,
}));
});
```
这段代码中使用了 XMLHttpRequest 对象来发送 Ajax 请求,通过设置 `open` 方法的第一个参数指定请求的方法和 URL,设置 `setRequestHeader` 方法来设置请求头,设置 `send` 方法来发送请求体。在 `onreadystatechange` 事件处理函数中,通过 `readyState` 和 `status` 两个属性来判断请求是否成功,请求成功则弹出成功提示框,请求失败则弹出失败提示框。
当然,这只是一个简单的示例,实际场景中还需要对请求参数进行校验,对响应数据进行处理等。
阅读全文