引自免费微信小程序：皆我百晓生
首先，让我们分析一下提供的代码片段，并逐步修复它以达到预期的效果。这里有一个详细的步骤和代码更新：
- 首先，我们需要获取输入框中的用户名（
username）和密码（password）值。 - 在创建XMLHttpRequest对象后，我们需要在打开连接之前设置onreadystatechange事件处理器。
- 当状态改变为4（完成），且状态码为200（成功）时，解析JSON响应并进行比较。
- 将用户名和密码的输入值存储在变量中，以便稍后在验证逻辑中使用。
- 使用HTML模板字符串将动态内容插入到页面上。
下面是修改后的代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>影城-用户登录界面</title>
<style>
/* ...此处省略样式 */
</style>
<script>
window.onload = function () {
const usernameInput = document.getElementById("username");
const passwordInput = document.getElementById("pwd");
const loginBtn = document.getElementById("loginBtn");
// 为登录按钮绑定点击事件
loginBtn.addEventListener('click', function (event) {
event.preventDefault(); // 阻止表单默认提交行为
const username_value = usernameInput.value.trim();
const pwd_value = passwordInput.value.trim();
// 新建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置onreadystatechange事件处理器
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 获取结果
let result = JSON.parse(xhr.responseText);
let res = false;
for (let i = 0; i < result.length; i++) {
let p = result[i];
if (username_value === p.user && pwd_value === p.password) {
res = true;
break;
}
}
if (res) {
alert("success");
} else {
alert("failed");
}
}
};
// 打开连接
xhr.open("GET", "data.json", true);
// 发送请求
xhr.send();
});
};
</script>
</head>
<body>
<div class="login">
<h1 class="logo">xx国际影城</h1>
<form id="loginForm">
<label for="username">用户名：</label><input type="text" id="username" name="username" required/>
<label for="pwd">密码：</label><input type="password" id="pwd" name="pwd" required/>
<span id="error" style="display:none;">用户名或密码不正确</span>
<a id="loginBtn" href="#">登录</a>
<br/>
<a href="#">还不是我们的会员？立即注册</a>
</form>
</div>
<script src="js/login.js"></script>
</body>
</html>
这个版本的代码应该能正常工作。注意，为了使此代码正常运行，你需要确保有名为"data.json"的文件，并且该文件包含了格式正确的JSON数据，例如：
[
{"user": "testUser", "password": "testPassword"},
{"user": "anotherUser", "password": "anotherPassword"}
]
这只是一个简单的示例，实际应用中应使用服务器端进行验证，而不是客户端。此外，密码通常应该进行加密处理，这里仅作演示用途。
