[JSP] 프론트에서 백엔드로 Post 전송

프런트엔드에서 백엔드로 데이터를 전달하기 위해서는 Form을 사용합니다

먼저 프론트엔드에서 아이디와 비밀번호 입력칸이 존재하고 로그인 버튼을 눌렀을 때

ID와 PW를 백엔드로 전달하는 HTML을 작성합니다

<div id="login-container">
    <h2>로그인</h2>
    <form name="listForm" method="post" onsubmit="return login_check();">
        <div class="input-group">
            <label for="username">아이디</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div class="input-group">
            <label for="password">비밀번호</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div class="button-container">
            <button type="submit">로그인</button>
        </div>
        <input type="hidden" name="id">
        <input type="hidden" name="pw">
    </form>
</div>

데이터를 전달하기 위해서는 Form 태그를 사용하는데 method를 통해 post방식을 지정합니다

여기에서 post로 값을 전달하기 위해서는 전달될 값을 지정해주어야 하는데

onsubmit을 통해 login_check()를 호출합니다

<script type="text/javaScript">
    
    function login_check() {
        var id = document.getElementById("username").value;
        var pw = document.getElementById("password").value;

        document.listForm.id.value = id;
        document.listForm.pw.value = pw;
        document.listForm.action = "<c:url value='/check.do'/>";

        return true;
    }

</script>

login_check가 호출되면 위에서 지정한 id, pw값을 var에 넣어주고

hidden으로 설정된 document.listForm.id의 value에 값을 넣어줍니다

 

마지막으로 post를 통해 전달될 곳의 주소값인 check.do를 설정한 다음

true를 리턴하게 되면 해당 id,pw값이 check.do의 백엔드 영역으로 전달됩니다