홈페이지>웹 디자인 튜토리얼>HTML 튜토리얼

로그인 사용자 이름을 얻기 위한 HTML 샘플 코드

저자：Eve Cole 업데이트 시간：2024-12-18 10:57:26

최근에 ajax 기술을 배워서 프론트엔드를 HTML 정적 웹 페이지로 변경해서 로그인한 사용자 이름을 어떻게 얻나요? 모든 사람들이 가장 먼저 생각하는 것은 쿠키와 세션을 사용하는 것입니다. 이는 JSP 페이지에서는 가능하지만 정적 HTML 페이지에서는 불가능합니다.

먼저, 쿠키와 세션이란 무엇일까요? 우선, HTTP 프로토콜이 상태 비저장 프로토콜이라는 것은 누구나 알고 있습니다. 데이터 교환이 완료되면 클라이언트와 서버 간의 연결이 닫히고, 다시 데이터를 교환하려면 새로운 연결을 설정해야 합니다. 이는 서버가 연결에서 세션을 추적할 수 없음을 의미합니다. 이때 쿠키 세션 추적 기술이 등장했습니다. 방문하는 사람에 관계없이 고객에게 패스를 하나씩 발급해야 합니다. 이런 방식으로 서버는 패스에서 클라이언트의 신원을 확인할 수 있습니다. 이것이 쿠키가 작동하는 방식이며 클라이언트에 저장됩니다. 세션은 클라이언트 상태를 기록하기 위해 서버에서 사용하는 메커니즘입니다. 이는 서버에서 사용자 프로필 테이블을 설정하는 것과 동일하며 프로필 테이블이 현재 클라이언트와 일치하는지 확인하기만 하면 됩니다. 세션은 키-값 속성 쌍이기도 하며 getAttribute(Stringkey) 및 setAttribute(String key, Object value) 메소드를 통해 고객 상태 정보를 읽고 씁니다. 서블릿에서는 request.getSession() 메소드를 통해 클라이언트의 Session을 획득합니다.

HTML은 로그인 사용자 이름을 가져옵니다 . Session은 JSP의 9가지 내장 개체 중 하나입니다. HTML에 그다지 친숙하지 않은데 정적 리소스를 얻는 방법은 무엇입니까? 첫 번째는 전환 서블릿을 생성하고 사용자 세션을 저장한 후 획득하는 것입니다. 두 번째는 백그라운드를 통해 경로+사용자 이름을 연결해 Ajax를 통해 프런트 데스크에 전달하면, 프런트 데스크가 url을 얻어서 운영하는 것이다.

1단계: 필수 페이지에 URL 경로 전달

     $.아약스({
        URL: '/로그인',
        데이터: {
            사용자 이름: 사용자 이름,
            비밀번호: 비밀번호
        },
        유형: 'GET',
        성공: 함수(결과) {
            if (결과.코드 === 0) {
                if(발 == 숫자){
                    layer.msg("로그인 성공", function () {
                        window.location.href = "index1.html?"+$("#username").val()+""";
                    })
                    }또 다른{
                    layer.msg('인증코드 오류')
                }
            } 또 다른 {
                layer.msg("로그인 실패," + result.msg, {icon: 2})
            }
        }
    })
}

중요한 것은 window.location.href = "index.html?"+$("#username").val()+"";라는 문장입니다. 여기서 $("#username").val()은 사용자를 가져옵니다. name 값, 사용자 이름은 사용자 이름의 ID입니다.

두 번째 단계는 index.html에서 경로를 얻어서 운영하는 것입니다.

먼저 사용자 이름을 받을 ID를 정의합니다.

<p id = "이름"></p>

그런 다음 JS를 통해 가져옵니다.

<스크립트 유형="텍스트/자바스크립트">
     var url = 위치.href;
     //경고(url);
     var num =url.indexOf("?");
     var str = url.substr(num+1);
     $("#name").html("환영합니다" +str);
</script>

마지막에 추가하는 것을 잊지 마세요

<script type="text/javascript" src="./layui/js/jquery.min.js"></script>

로그인 사용자 이름을 얻기 위한 HTML의 샘플 코드에 대한 이 기사를 마치겠습니다. 로그인 사용자 이름을 얻기 위한 Html 관련 콘텐츠를 더 보려면 downcodes.com의 이전 기사를 검색하거나 다음 관련 기사를 계속 찾아보시기 바랍니다. 앞으로 더 많은 내용을 읽어보세요. downcodes.com을 지원하세요!

관련 기사