로그인 창 자바스크립트 구현-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

로그인 창 자바스크립트 구현

PHPz

May 22, 2023 am 10:33 AM

로그인 창에 JavaScript 구현

일일 웹사이트 로그인 작업에서 사용자는 계정 번호와 비밀번호를 입력한 다음 "로그인" 버튼을 클릭하여 로그인 작업을 완료해야 합니다. 이 로그인 작업을 완료하려면 프런트엔드 페이지와 백엔드 서비스의 협력이 필요합니다. 이 기사에서는 JavaScript를 사용하여 간단한 로그인 창을 구현하는 방법을 소개합니다.

프런트 엔드 페이지 디자인

먼저 html로 로그인 창을 디자인해야 합니다. 가장 간단한 로그인 창은 두 개의 입력 상자(계정 및 비밀번호)와 제출 버튼(로그인)이 포함된 양식입니다. <input> 태그를 사용하여 입력 상자와 버튼을 정의한 다음 <form> 태그를 사용하여 양식을 정의할 수 있습니다. 코드는 다음과 같습니다: <input>标签来定义输入框和按钮，然后使用<form>标签定义表单。代码如下：

<form>
    <label>账号</label>
    <input type="text" name="username" required />
    <label>密码</label>
    <input type="password" name="password" required />
    <button type="submit">登录</button>
</form>

로그인 후 복사

这个表单包含两个输入框，分别是username和password。同时，还指定了一个required属性来保证输入框中一定有值。国际化为了更友好的让用户知道需要输入内容，加入了<label>标签来提示用户输入项。

JavaScript处理表单提交

当用户在以上表单中输入了账号和密码之后，需要点击“登录”按钮来完成提交操作。这时我们需要编写JavaScript代码来监听表单的提交事件，并处理相关逻辑。代码如下：

var form = document.querySelector('form');

form.addEventListener('submit', function(event) {
    event.preventDefault();

    var username = form.elements['username'].value;
    var password = form.elements['password'].value;

    if (username === 'admin' && password === 'admin') {
        alert('登录成功');
    } else {
        alert('账号或密码错误');
    }
});

로그인 후 복사

通过document.querySelector方法获取了表单的DOM元素，然后使用addEventListener方法来为表单的提交事件提供一个回调函数。当点击“登录”按钮时，将会触发这个回调函数。event参数表示了事件的相关信息，使用event.preventDefault方法可以阻止默认行为，即表单的提交操作。

然后，使用表单元素的elements属性获取到输入框中的值，判断账号密码是否符合要求。如果符合要求，则使用alert函数提示用户登录成功；否则，提示用户账号或密码错误。

数据提交

在实际的登录操作中，需要将用户输入的账号和密码提交到后端服务进行验证。在JavaScript中，可以使用XMLHttpRequest对象实现AJAX请求，以达到这个目的。

代码如下：

var form = document.querySelector('form');

form.addEventListener('submit', function(event) {
    event.preventDefault();

    var username = form.elements['username'].value;
    var password = form.elements['password'].value;

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/login');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            if (response.code === 0) {
                alert('登录成功');
            } else {
                alert(response.message);
            }
        }
    };
    xhr.send('username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password));
});

로그인 후 복사

其中，XMLHttpRequest对象用于发送异步HTTP请求。我们使用POST请求，将用户名和密码作为请求体内容发送给后端服务。setRequestHeader方法用于设置请求头；onreadystatechangerrreee

이 양식에는 사용자 이름 및 비밀번호라는 두 개의 입력 상자가 포함되어 있습니다. 동시에 입력 상자에 값이 있어야 함을 보장하기 위해 required 속성도 지정됩니다. 국제화를 보다 사용자 친화적으로 만들고 사용자에게 입력해야 할 내용을 알려주기 위해 사용자에게 항목을 입력하라는 메시지를 표시하는 <label> 태그가 추가되었습니다.