jquery는 로그인 점프 페이지 점프 페이지 점프를 구현합니다.

웹 개발에서 매우 일반적인 요구 사항은 사용자가 계정 번호와 비밀번호를 입력하여 로그인 작업을 완료한 후 다른 페이지로 이동하는 것입니다. 이 프로세스에는 Javascript 라이브러리에서 매우 널리 사용되는 jQuery를 사용해야 합니다.

jQuery는 "적게 작성하고 더 많은 작업을 수행"한다는 아이디어로 설계된 빠르고 간결한 JavaScript 라이브러리입니다. JavaScript에서 일반적으로 사용되는 작업을 캡슐화하여 개발자가 보다 편리하고 빠르게 웹 개발을 완료할 수 있도록 합니다.

이 글에서는 jQuery를 사용하여 사용자 로그인 후 페이지 점프를 구현하는 방법을 소개합니다.

1. 로그인 양식 정의

먼저 아래와 같이 사용자 이름과 비밀번호 입력 상자 및 제출 버튼이 포함된 HTML 양식을 정의해야 합니다.

<form id="login-form">
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
  </div>
  <button type="submit">登录</button>
</form>

코드에서는 HTML5의 필수 속성을 사용하여 강제로 사용자에게 사용자 이름과 비밀번호를 입력하라는 메시지가 표시됩니다.

2. 양식 제출 이벤트 바인딩

다음으로 jQuery를 사용하여 양식 제출 이벤트를 바인딩해야 합니다. 아래와 같이 $(document).ready(function(){}) 메서드를 사용하여 문서가 로드될 때 이벤트를 바인딩할 수 있습니다.

$(document).ready(function(){
  $("#login-form").submit(function(event){
    // 阻止表单默认提交行为
    event.preventDefault();

    // 获取用户名和密码
    var username = $("#username").val();
    var password = $("#password").val();

    // TODO: 验证用户名和密码

    // 跳转到指定页面
    window.location.href = "https://www.example.com/dashboard";
  });
});

코드에서는 jQuery의 $("#login-form" )을 사용합니다. 메서드를 사용하여 양식 요소를 선택하고 .submit() 메서드를 사용하여 제출 이벤트를 바인딩합니다. 이벤트 핸들러 함수에서는 event.preventDefault() 메서드를 사용하여 양식의 기본 제출 동작을 방지합니다.

다음으로 $.val() 메서드를 통해 입력 상자에서 사용자 이름과 비밀번호를 가져오고 필요에 따라 사용자 이름과 비밀번호 확인을 수행할 수 있습니다. 확인을 통과한 후 window.location.href 속성을 사용하여 지정된 페이지로 이동할 수 있습니다.

3. 지정된 페이지로 이동

코드에서는 window.location.href 속성을 사용하여 지정된 페이지로 이동합니다. 이 속성은 현재 페이지의 URL을 가져오거나 설정할 수 있습니다. window.location.href = "your_url"과 같은 문을 사용하여 페이지로 이동할 수 있습니다.

우리 코드에서는 "https://www.example.com/dashboard" 페이지로 이동합니다. 물론 실제 개발에서는 자신만의 점프타겟으로 교체해야 합니다.

4. 로그인 및 점프 구현을 위한 비동기 요청

위 코드에서 사용자가 로그인 버튼을 클릭하면 페이지가 지정된 URL로 리디렉션됩니다. 그러나 이 접근 방식에는 몇 가지 단점이 있습니다. 예를 들어 사용자는 비밀번호 확인 중에 약간의 지연을 겪을 수 있습니다. 이로 인해 사용자 경험이 저하되므로 AJAX를 사용하여 비동기 로그인 및 점프를 구현하는 것이 더 나은 방법입니다.

로그인 및 점프에 대한 비동기 요청을 구현하기 위해 위 코드를 다음과 같이 수정할 수 있습니다.

$(document).ready(function(){
  $("#login-form").submit(function(event){
    // 阻止表单默认提交行为
    event.preventDefault();

    // 获取用户名和密码
    var username = $("#username").val();
    var password = $("#password").val();

    // 发起AJAX请求
    $.ajax({
      type: "POST",
      url: "/login",
      data: {username: username, password: password},
      success: function(data){
        // 登陆成功，跳转到指定页面
        window.location.href = "https://www.example.com/dashboard";
      },
      error: function(){
        // 登录失败
        alert('用户名或密码不正确！');
      }
    });
  });
});

위 코드에서는 jQuery의 ajax() 메서드를 사용하여 비동기 요청을 시작합니다. 유형, URL, 데이터 등의 매개변수를 설정하여 지정된 URL로 요청을 보낼 수 있습니다. 서버가 성공적인 응답을 반환하면 Success() 메소드를 사용하여 해당 페이지로 이동합니다. 로그인에 실패하면 오류를 통해 오류 창이 팝업됩니다.

요약

이 글에서는 양식 제출 이벤트 바인딩, 사용자 이름 및 비밀번호 획득, 사용자 신원 확인, 페이지 이동 등 jQuery를 사용하여 로그인하고 지정된 페이지로 이동하는 방법을 소개합니다. 또한 비동기 요청 로그인 점프를 구현하기 위해 AJAX를 사용하는 방법도 소개했습니다. 이러한 기술을 통해 당사는 사용자 로그인 및 페이지 이동을 더 효과적으로 처리할 수 있습니다.

위 내용은 jquery는 로그인 점프 페이지 점프 페이지 점프를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!