본문 바로가기
프로그래밍/PHP

PHP에서 jQuery Ajax로 json 데이터 주고받기

by pentode 2018. 4. 19.
반응형

클라이언트는 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


반응형

댓글9

  • hyhy 2019.07.07 08:08

    이해하기 쉬운 설명 감사합니다~
    답글

  • Hdev 2020.02.06 07:51

    제가 원하던 정보이고 설명이 쉽게 되어있네요!
    감사합니다 ~!
    답글

    • pentode 2020.02.08 20:03 신고

      요즘 웹에 ajax는 정말 많이 사용되죠. 도움이 되셨으면 좋겠네요. 새해 복많이 받으세요.^^

  • ke2 2020.05.25 03:45

    글 잘 봤습니다! 감사합니다ㅎㅎ
    근데 궁금한점이 있는데 제가 ajax.php에서 전송을 하게되면 json.php에서는 받아볼수 없는건가요?
    콘솔창에서 보냈구나만 알 수 있는거고, json에서 {"mode":null,"name":null,"email":null}을 출력하네요..

    답글

    • pentode 2020.06.06 23:34 신고

      위 예제에서는 json.php 에서 받을 내용을 다시 브라우저로 보내고 ajax.php 에서는 보낸 내용과 서버로 부터 받은 내용을 console 에 찍게 되어 있습니다. json.php로 부터 보내온 내용이 null 이라면 값이 제대로 넘어가지 않은게 아닐까 생각이 되네요. PHP는 서버측 디버깅 하기가 쉽제 않죠. 특히 ajax인 경우는 더 그렇습니다.

      PHP도 서버측 출력을 파일등으로 보내주는 디버깅용 라이브러리가 있는걸로 알고 있습니다. 그런것들을 사용해수 추적해 보시기 바랍니다.

  • ke2 2020.05.25 03:54

    추가로
    한객체를 넘긴다면 상관없겠지만 여러개의 json객체를 데이터를 넘기는데 식별할 수 있는 그 객체의 변수명이 있을까요?
    답글

    • pentode 2020.06.06 23:34 신고

      보통 여러개가 넘어가면 배열 형식으로 보내게 되고, 배열 인덱스를 사용해서 객체를 구분하게 됩니다.

  • steve 2022.07.06 10:58

    관리자의 승인을 기다리고 있는 댓글입니다
    답글