[JQuery] AJAX 기본 구문 및 예제

$.ajax()

AJAX 는 클라이언트와 서버가 페이지 새로고침 없이 데이터를 주고받도록 구현하는 방식을 말합니다.

기본 구문

$.ajax({
    url:'/study/tmp/test.php', //request 보낼 서버의 경로
    type:'post', // 메소드(get, post, put 등)
    data:{'id':'admin'}, //보낼 데이터
    success: function(data) {
        //서버로부터 정상적으로 응답이 왔을 때 실행
    },
    error: function(err) {
        //서버로부터 응답이 정상적으로 처리되지 못햇을 때 실행
    }
});

예제. 회원 목록을 추가 하기

페이지 전체를 호출하는 방식

[memeber 추가 시 페이지 전체 새로 호출]

AJAX 를 통해 호출하는 방식

[member 추가 시 페이지 호출 없이 회원 테이블만 새로 뿌려줌]

소스코드

페이지 전체를 호출하는 예제

submit 받고 처리하는 php 코드

<?php
    require $_SERVER['DOCUMENT_ROOT'].'/study/tmp/App_Data/UserDAO.php';
 
    //form 을 통해 넘어온 데이터들을 받아서
    $userid = $_REQUEST["userid"];
    $userpw = $_REQUEST["userpw"];
    $username = $_REQUEST["username"];
    $userphone = $_REQUEST["userphone"];
 
    //DB에 넣고
    $userDAO = new UserDAO();
    $userDAO->insertMember($userid, $userpw, $username, $userphone);
    
    //다시 test.02.php로 리다이렉트
    header("Location:/study/tmp/view/test02.php");
?>

AJAX 방식으로 호출하는 예제

submit 발생 시 처리하는 자바스크립트 코드

function insertMemberAJAX() {
    var jObject = new Object();
    jObject.userid = $('#userid').val();
    jObject.userpw = $('#userpw').val();
    jObject.username = $('#username').val();
    jObject.userphone = $('#userphone').val();
 
    initInput();
 
    var data = JSON.stringify(jObject);
    $.ajax({
        url:'/study/tmp/controller/UserAJAX.php',
        type: 'post',
        data: {'data':data, 'type':'addMember'},
        success : function(data){
            callMemberList();
        }
    });
}

function callMemberList() {
    $.ajax({
        url:'/study/tmp/controller/UserAJAX.php',
        type:'post',
        data:{'type':'getMemberList'},
        success: function(data) {
            var arr = JSON.parse(data);
 
            var htmlCode = '';
            htmlCode += '<tr>'
            htmlCode += '<th>idx</th>'
            htmlCode += '<th>ID</th>'
            htmlCode += '<th>Name</th>'
            htmlCode += '<th>phone</th>'
            htmlCode += '<th>Delete</th>'
            htmlCode += '</tr>'
 
            for(var i=0;i<arr.length;i++){
                htmlCode += '<tr>'
                htmlCode += '<td>'+arr[i]['idx'];+'</td>'
                htmlCode += '<td>'+arr[i]['userid'];+'</td>'
                htmlCode += '<td>'+arr[i]['username'];+'</td>'
                htmlCode += '<td>'+arr[i]['userphone'];+'</td>'
                htmlCode += '<td class="deleteBtn">X</td>'
                htmlCode += '</tr>'
            }
 
            $('#member_table').append(htmlCode);
            $('#loadingImg').hide();
        }
    });
}

AJAX 에서 호출하는 페이지의 php코드

<?php
    require $_SERVER['DOCUMENT_ROOT'].'/study/tmp/App_Data/UserDAO.php';
 
    $type = $_REQUEST["type"];
    if($type == 'getMemberList') {
        $userDAO = new UserDAO();
        $user = $userDAO->getUserList();
 
        echo json_encode($user, JSON_UNESCAPED_UNICODE ); //한글 데이터라면 한글 깨짐 방지        
    }else if($type == 'addMember') {    
        $data = $_REQUEST["data"];
        $arr = json_decode($data, true);
 
        $userid = $arr["userid"];
        $userpw = $arr["userpw"];
        $username = $arr["username"];
        $userphone = $arr["userphone"];
 
        $userDAO = new UserDAO();
        $userDAO->insertMember($userid, $userpw, $username, $userphone);    
    }
?>