js实现用户登录时,使用AJAX技术获取服务器端的 “names.json”文件,该文件包含一些用户名和密码等数据(数据格式自定),通过查找,检测用户名和密码是否正确。
时间: 2023-12-25 20:02:35 浏览: 69
可以使用以下代码实现:
HTML代码:
```html
<form id="login-form">
<label>用户名:</label>
<input type="text" name="username" required>
<label>密码:</label>
<input type="password" name="password" required>
<button type="submit">登录</button>
</form>
```
JavaScript代码:
```javascript
const loginForm = document.getElementById('login-form');
loginForm.addEventListener('submit', (event) => {
event.preventDefault();
const username = loginForm.elements.username.value;
const password = loginForm.elements.password.value;
// 发送AJAX请求获取names.json文件
fetch('names.json')
.then(response => response.json())
.then(data => {
// 检测用户名和密码是否正确
const user = data.find(user => user.username === username && user.password === password);
if (user) {
alert('登录成功!');
} else {
alert('用户名或密码错误!');
}
})
.catch(error => {
console.error('获取文件时出现错误:', error);
});
});
```
其中,`fetch()`函数用于发送AJAX请求获取服务器端的`names.json`文件,`response.json()`方法用于将响应数据解析为JSON格式。解析后的数据是一个数组,每个元素包含一个用户名和一个密码。然后使用`Array.prototype.find()`方法查找用户名和密码是否匹配。若匹配,则提示登录成功,否则提示用户名或密码错误。如果获取文件时出现错误,则在控制台输出错误信息。
阅读全文