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