비동기방식 가입페이지

비동기 방식( ajax )로 가입페이지 만들기

ajax를 사용하여 비동기 방식 가입페이지를 만들어 보겠습니다.

 

중복검사

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    let isEmailCheck = false;
    let isNickCheck = false;

    function emailChecking(){
        let youEmail = $("#youEmail").val();
        if(youEmail == null || youEmail == ''){
            $("#youEmailComment").text("* 이메일을 입력해주세요");
        }else {
            $.ajax({
                type : "POST",
                url : "joinCheck.php",
                data : {"youEmail" : youEmail, "type" : "isEmailCheck"},
                dataType : "json",
                success : function(data){
                    if(data.result == "good"){
                        $("#youEmailComment").text("* 사용 가능한 이메일 입니다");
                        isEmailCheck = true;
                    }else {
                        $("#youEmailComment").text("* 이미 존재하는 이메일 입니다");
                        isEmailCheck = false;
                    }
                },
                error : function(request, status, error){
                    console.log("request" + request);
                    console.log("status" + status);
                    console.log("error" + error);
                }
            })
        }
    };

    function nickChecking(){
        let youNick = $("#youNick").val();

        if(youNick == null || youNick == ''){
            $("#youNickComment").text("* 닉네임을 입력해주세요.");
        } else {
            $.ajax({
                type : "POST",
                url : "joinCheck.php",
                data : {"youNick": youNick, "type": "isNickCheck"},
                dataType : "json",

                success : function(data){
                    if(data.result == "good"){
                        $("#youNickComment").text("* 사용 가능한 닉네임 입니다");
                        isNickCheck = true;
                    }else {
                        $("#youNickComment").text("* 이미 존재하는 닉네임 입니다");
                        isNickCheck = false;
                    }
                },

                error : function(request, status, error){
                    console.log("request" + request);
                    console.log("status" + status);
                    console.log("error" + error);
                }
            })
        }
    };
</script>

중복검사 알아보기 ( jQuery )

• isEmailCheck와 isNickCheck 변수에 각각 false의 값을 저장합니다. (초기값)
• emailChecking()함수
• youEmail 변수에 html문서에 있는 #youEmail의 value값을 가져와 저장합니다.
• youEmail이 null 혹은 공백이면 #youEmailComment에 이메일 작성요구 텍스트를 출력합니다.
• 공백이 아니라면 ajax를 사용해 POST방식으로 joinCheck.php로 아래의 데이터를 넘깁니다.
• "youEmail"에는 youEmail을 "type"에는 "isEmailCheck"의 데이터를 넘깁니다.
• 데이터타입은 json형식으로 정합니다.
• success 일 때 함수
• data.result의 값이 good이라면 사용가능하다는 텍스트를,
• data.result의 값이 bad라면 이미 존재한다는 텍스트를 출력합니다.

function nickChecking(){
    let youNick = $("#youNick").val();

    if(youNick == null || youNick == ''){
        $("#youNickComment").text("* 닉네임을 입력해주세요.");
    } else {
        $.ajax({
            type : "POST",
            url : "joinCheck.php",
            data : {"youNick": youNick, "type": "isNickCheck"},
            dataType : "json",

            success : function(data){
                if(data.result == "good"){
                    $("#youNickComment").text("* 사용 가능한 닉네임 입니다");
                    isNickCheck = true;
                }else {
                    $("#youNickComment").text("* 이미 존재하는 닉네임 입니다");
                    isNickCheck = false;
                }
            },

            error : function(request, status, error){
                console.log("request" + request);
                console.log("status" + status);
                console.log("error" + error);
            }
        })
    }
};

닉네임 중복검사

• 이메일 중복검사와 동일한 방법입니다.

joinCheck.php 작성하기

<?php
    include "../connect/connect.php";

    $type = $_POST['type'];
    $jsonResult = "bad";

    if($type == "isEmailCheck"){
        $youEmail = $connect -> real_escape_string(trim($_POST['youEmail']));
        $sql = "SELECT adminEmail FROM adminMembers WHERE adminEmail = '{$youEmail}'";
    }

    if($type == "isNickCheck"){
        $youNick = $connect -> real_escape_string(trim($_POST['youNick']));
        $sql = "SELECT adminNick FROM adminMembers WHERE adminNick = '{$youNick}'";
    };

    $result = $connect -> query($sql);

    if($result -> num_rows == 0){
        $jsonResult = "good";
    }

    echo json_encode(array("result" => $jsonResult));
?>

php 정리해보기

• 변수 type에 POST방식으로 받아온 type의 값을 저장합니다. (isEmailCheck 혹은 isNickCheck)
• 받아온 type의 값이 isEmailCheck라면
• youEmail 변수에 POST방식으로 받아온 youEmail값을 공백없이 저장합니다.
• sql 변수에 adminMembers테이블에서 youEmail과 같은 adminEmail을 불러오는 쿼리문을 저장합니다.
• 쿼리문을 실행한 결과를 result 변수에 저장합니다.
• result의 줄 개수가 0이라면 (결과가 없다면) jsonResult에 good을 저장합니다.
• type의 값이 isNickCheck와 같아도 같은 방법을 실행합니다.

 

 

 

이상으로 ajax를 사용한 비동기방식으로 이메일과 닉네임 중복확인을 만들어 보았습니다 !