[JS/jQuery]데이터 Ajax 전송

Ajax 방식(비동기)으로 데이터 전송하기

 

비동기 방식이랑 페이지 전환 없이 데이터를 주고받는 것을 말한다

페이지 전체가 아닌 일부분만을 업데이트 하여 데이터를 가져오는 동안 

다른 작업을 진행할 수 있다 

 

<form>
    <input id="event_no" value="1">
    <input type="checkbox" value="동의" id="chkbox">동의
</form>
<button id="submit" type="submit"> 제출 </button>   //버튼 클릭시 submit됨

 

 

<script>
    $(document).ready(function(){
        $('#submit').click(function(){		//id가 submit 클릭시 실행됨 

            if ($('#chkbox').is(":checked") == false) {		//체크박스 체크여부 확인
                alert('정보수집에 동의해주세요.');
                return false;
            }

            var event_no = $('#event_no').val();  //이름이 event_no인 input의 value값 가져오기

            $.ajax({
                url: '/mypage/event_req_test.exe.php',
                data: {'event_no': event_no},
                dataType: 'json',
                type: 'post',
                success: function (r) {		//응답 데이터를 r이라 지칭하고
                    alert(r.msg);			//성공시 r의 msg alert창 띄우기 
                },
                error: function (r) {
                    console.log(r);
                }
            })
        })
    })
</script>

버튼 클릭시 익명함수가 실행되며 

체크박스의 체크 여부를 확인한 뒤 

ajax가 실행된다 

 

url : 데이터 전송할 페이지

data : 전송할 데이터 

dataType : 전송받을 데이터 타입 

type : 전송방식

 

ajax의 실행 결과에 따라 success문과 error문 내부 코드 실행. 

 

 

$sql ="쿼리문 작성"
$result = $dbCon->getRow($sql);
    if(!empty($result)){
        $return_arr = array(
            'status' => false,
            'msg'    => '이미 신청하셨습니다.',
            'error'  => ''
        );
        $return_arr = json_encode($return_arr, JSON_UNESCAPED_UNICODE);
        echo $return_arr;
        exit();
    }

전송받은 데이터를 활용하여 쿼리문 작성 및 실행 후 

결과 응답하는 변수를 생성하여 

 

Ajax페이지에서 데이터타입을 json으로 지정했기때문에 

json_encode 후 데이터를 보내준다