PHP에서 jQuery Ajax로 json 데이터 주고받기 | 맥으로 웹서버 구축하기

클라이언트는 jQuery Ajax 를 사용하고, 서버측은 PHP 를 사용하여 json 타입의 데이터를 주고 받는 방법을 알 아 봅니다.
테스트에는 PHP 7.1.10 버전이 사용되었다 . 클라이언트인 브라우저에서는 jQuery의 ajax 메소드를 사용한다.


1. jQuery 라이브러리를 포함한다.

<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.4.min.js'></script>


2. 데이터를 입력 받는 폼을 만듭니다.

GET 방식으로 데이터를 전달하기 위해 AjaxCall('GET'); 함수를 호출하고, POST 방식으로 전달하기 위해서
AjaxCall('POST'); 함수를 호출한다.

<form name='AjaxForm' id='AjaxForm'>
    <label for='name'>이름</label>
    <input type='text' name='name' id='name' />
    <br />
    <label for='email'>이메일</label>
    <input type='text' name='email' id='email' />
</form>
<input type='button' value='GET' onclick='AjaxCall('GET');' />
<input type='button' value='POST' onclick='AjaxCall('POST');' />
3. 데이터를 ajax 로 주고 받는 함수를 정의한다.

서버로 전달할 데이터를 만드는 방법은 아래 처럼 세 가지 정도 있다.
 

- 자바스크립트 객체로 만드는 방법
 예) var data = { name:'홍길동', email:'kdhong@domain.com' };

- jQuery의 serialize() 메소드를 사용하여 만드는 방법
 예) var data = $('#FormId').serialize();

- 자바스트립트 객체를 JSON.stringify()로 json 문자열로 만드는 방법
 예) var data = JSON.stringify({name:'홍길동',email:'kdhong@domain.com'});

이 경우 전달할 데이터는 자바스크립트 객체로 만들고 그 객체내의 하나의 데이터를  json 문자열을 넣는게 서버쪽에서 처리하기 편리하다.
예) var sendData = {data: JSON.stringify({name:'홍길동',email:'kdhong@domain.com'})};


<script type='text/javascript'>
//<![CDATA[
function createData() {
    // 1. 자바스크립트 객체 형태로 전달
    var sendData = {name:$('#name').val(), email:$('#email').val()};
    
    // 2. jQuery serialize함수를 사용해서 전달
    //var sendData = $('#AjaxForm').serialize();
    
    console.log(sendData);
    
    return sendData;
    
    // 3. 객체를 json 문자열로 만들어서 전달
    //var sendData = JSON.stringify({name:$('#name').val(), email:$('#email').val()});
    //console.log(sendData);
    //return {'data' : sendDta};
}

function AjaxCall(method) {
    $.ajax({
        type: method,
        url : 'json.php?mode=' + method,
        data: createData(),
        dataType:'json',
        success : function(data, status, xhr) {
            console.log(data);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR.responseText);
        }
    });
}
//]]>
</script>


4. 서버쪽 구현 이다.

클라이언트쪽의 jQuery의 ajax 메소드에서 {dataType:'json'} 으로 지정했다면 서버쪽에서 보내는 데이터의 컨텐츠 타입도 json 으로 지정한다.
PHP의 header 함수를 사용하여 지정한다.
예) header('Content-Type: application/json');

자바스크립트 객체 또는 serialize() 해서 넘어온 경우는 일반 폼을 처리하는것과 같이 $_GET, $_POST를 사용하면 된다.
자바스크립트 객체에 JSON.stringify()로 json 문자열로 변환되어 넘어온 데이터는 json_decode() 함수를 사용해서 PHP 객체로 변환한다.
예) $data = json_decode($_GET['data']);

<?php
header('Content-Type: application/json');

$method = $_SERVER['REQUEST_METHOD'];
$name = '';
$email = '';

if($method == 'GET') {
    // 1. 자바스크립트 객체 또는 serialize() 로 전달
    $name = $_GET['name'];
    $email = $_GET['email'];
    echo(json_encode(array('mode' => $_REQUEST['mode'], 'name' => $name, 'email' => $email)));
    
    // 2. JSON.stirngify() 함수로 전달
    //$data = json_decode($_GET['data']);
    //echo(json_encode(array('mode' => $_REQUEST['mode'], 'name' => $data->name, 'email' => $data->email)));
} 

else if($method == 'POST') {
    // 1. 자바스크립트 객체 또는 serialize() 로 전달
    $name = $_POST['name'];
    $email = $_POST['email'];
    echo(json_encode(array('mode' => $_REQUEST['mode'], 'name' => $name, 'email' => $email)));
    
    // 2. JSON.stirngify() 함수로 전달
    //$data = json_decode($_POST['data']);
    //echo(json_encode(array('mode' => $_REQUEST['mode'], 'name' => $data->name, 'email' => $data->email)));
}
?>


5. 실행 결과 이다.



PHP에서 jQuery의 ajax 메소드를 사용하여 json 타입의 데이터를 주고 받는 방법을 보았습니다.

※ 전체소스
 ajax_json.zip