JQuery & Ajax & Json 예제

 

1. 클라이언트: jQuery Ajax 요청

GET 요청 (데이터 조회)

클라이언트가 서버에서 데이터를 조회하는 GET 요청입니다. 서버로부터 받은 response를 if 조건문으로 처리합니다.

$.ajax({
  url: "server.php", // PHP 파일 경로
  type: "GET", // GET 요청
  dataType: "json", // 서버에서 받을 데이터 형식
  success: function(response) {
    // 응답 결과 처리
    if (response.status === "success") {
      console.log("요청 성공:", response.message);
      console.log("받은 데이터:", response.data);
      // 성공 시 추가 작업
      alert("데이터를 성공적으로 가져왔습니다!");
    } else {
      console.error("요청 실패:", response.message);
      alert("에러 발생: " + response.message);
    }
  },
  error: function(xhr, status, error) {
    console.error("Ajax 요청 실패:", error);
    alert("서버와의 통신 중 문제가 발생했습니다.");
  }
});

 

 

 

POST 요청 (데이터 전송)

클라이언트가 데이터를 서버로 전송하는 POST 요청입니다. 서버 응답에 따라 성공/실패를 처리합니다.

$.ajax({
  url: "server.php", // PHP 파일 경로
  type: "POST", // POST 요청
  contentType: "application/json", // 데이터 형식
  data: JSON.stringify({ name: "Jane", age: 30 }), // JSON 데이터 전송
  dataType: "json", // 서버에서 받을 데이터 형식
  success: function(response) {
    // 응답 결과 처리
    if (response.status === "success") {
      console.log("POST 요청 성공:", response.message);
      console.log("받은 데이터:", response.data);
      alert("데이터 전송에 성공했습니다!");
    } else {
      console.error("POST 요청 실패:", response.message);
      alert("에러 발생: " + response.message);
    }
  },
  error: function(xhr, status, error) {
    console.error("Ajax 요청 실패:", error);
    alert("서버와의 통신 중 문제가 발생했습니다.");
  }
});

 

 

 

2. 서버: PHP 요청 처리

PHP에서 클라이언트의 GET 및 POST 요청을 처리하고, JSON 형식으로 응답을 반환합니다.

GET 요청 처리

<?php
header("Content-Type: application/json"); // JSON 응답 헤더

// GET 요청에 대한 응답 데이터 생성
$response = [
    "status" => "success",
    "message" => "GET 요청이 성공적으로 처리되었습니다.",
    "data" => [
        "id" => 123,
        "name" => "John Doe",
        "email" => "john.doe@example.com"
    ]
];

// JSON 데이터 반환
echo json_encode($response);
?>

 

 

 

POST 요청 처리

<?php
header("Content-Type: application/json"); // JSON 응답 헤더

// POST 요청 데이터 읽기
$input = file_get_contents("php://input"); // JSON 데이터 읽기
$data = json_decode($input, true); // JSON 데이터를 PHP 배열로 변환

// 데이터 유효성 검사 및 처리
if (isset($data['name']) && isset($data['age'])) {
    // 성공 응답 데이터 생성
    $response = [
        "status" => "success",
        "message" => "POST 요청이 성공적으로 처리되었습니다.",
        "data" => [
            "name" => $data['name'],
            "age" => $data['age']
        ]
    ];
} else {
    // 실패 응답 데이터 생성
    $response = [
        "status" => "error",
        "message" => "유효하지 않은 요청 데이터입니다."
    ];
}

// JSON 데이터 반환
echo json_encode($response);
?>

 

 

 

3. 응답 결과 처리 흐름

GET 요청 결과

클라이언트가 GET 요청을 보냈을 때 서버가 반환한 JSON 응답:

{
  "status": "success",
  "message": "GET 요청이 성공적으로 처리되었습니다.",
  "data": {
    "id": 123,
    "name": "John Doe",
    "email": "john.doe@example.com"
  }
}

 

이 경우 클라이언트는 if (response.status === "success") 조건을 만족하므로 성공 처리 로직이 실행됩니다:

console.log("요청 성공:", response.message);
alert("데이터를 성공적으로 가져왔습니다!");

 

 

POST 요청 결과

클라이언트가 아래 데이터를 전송했을 경우:

{ "name": "Jane", "age": 30 }

 

서버가 반환한 JSON 응답:

{
  "status": "success",
  "message": "POST 요청이 성공적으로 처리되었습니다.",
  "data": {
    "name": "Jane",
    "age": 30
  }
}

 

클라이언트는 if (response.status === "success") 조건을 만족하므로 성공 처리 로직이 실행됩니다:

console.log("POST 요청 성공:", response.message);
alert("데이터 전송에 성공했습니다!");

 

 

실패한 요청의 처리

만약 클라이언트가 잘못된 데이터를 전송하거나 필요한 필드가 누락되었을 경우, 서버는 아래와 같은 실패 응답을 반환합니다:

{
  "status": "error",
  "message": "유효하지 않은 요청 데이터입니다."
}

 

클라이언트는 if (response.status === "error") 조건을 만족하므로 실패 처리 로직이 실행됩니다:

console.error("POST 요청 실패:", response.message);
alert("에러 발생: 유효하지 않은 요청 데이터입니다.");