project_0329 아이디/비번 찾기

• 아이디 찾기
• 비밀번호 찾기
• 회원가입 id체크 ajax 수정

JavaScript는 클라이언트 측에서 실행되는 언어이며, <c:if>와 같은 JSP 코드는 서버 측에서 실행됩니다. 따라서 AJAX를 통해 가져온 데이터를 JavaScript에서 JSP로 직접 전달하는 것은 불가능합니다.

그러나 AJAX를 통해 가져온 데이터를 사용하여 페이지를 업데이트하고, 해당 데이터를 서버로 다시 보내거나 서버 측에서 사용해야 할 필요가 있다면, 다음과 같은 방법을 사용할 수 있습니다.

AJAX 요청 후에 서버로부터 데이터를 가져온 후, 해당 데이터를 적절히 처리합니다.
처리된 데이터를 사용하여 새로운 AJAX 요청을 보내거나, 페이지의 내용을 업데이트합니다.
필요한 경우, 서버로 데이터를 전송하고 서버에서 새로운 데이터를 생성하여 사용합니다.
여기서는 ajaxCalled 값을 사용하여 페이지에 메시지를 표시하는 예제를 보여드리겠습니다.

<script>
    var ajaxCalled = false;

    function callByAjax(loginId) {
        var form = document.form1;
        var action = "../member/doAction";
        var loginId = form.loginId.value;
        
        $.get(action, {
            loginId: loginId,
        }, function(data) {
            $('.msg').text(data);
            ajaxCalled = true;
            console.log(ajaxCalled);
            // AJAX 요청 후에 ajaxCalled 값을 true로 설정합니다.
            // 이제 페이지에 표시할 내용을 업데이트할 수 있습니다.
            updatePage(); // 페이지 업데이트 함수 호출
        }, 'html');
    }

    // 페이지 업데이트 함수
    function updatePage() {
        if (ajaxCalled) {
            // ajaxCalled 값이 true일 때만 메시지를 표시합니다.
            $('.msg').show();
        }
    }
</script>

<section class="mt-8 text-xl px-4">
    <div class="signup-form">
        <form name="form1" action="../member/doJoin" method="POST">
            <div class="text">*는 필수정보</div>
            <div>
                <label for="username">*아이디:</label>
                <input type="text" id="loginId" name="loginId" autocomplete="off" required>
                <!-- AJAX 요청 후에 메시지를 표시할 div -->
                <div class="msg" style="display: none;"></div>
            </div>
            <!-- 로그인 버튼 -->
            <button type="button" onclick="callByAjax()">로그인</button>
        </form>
    </div>
</section>

이 예제에서는 AJAX 요청 후에 ajaxCalled 값을 설정하고, 이 값이 true일 때만 메시지를 표시하도록 페이지를 업데이트합니다. 페이지가 로드되면 메시지는 숨겨집니다. AJAX 요청이 성공적으로 완료되면 메시지가 표시됩니다.