Use json with php&ajax

웹 프로그래밍을 학습하며 구현한 프로젝트의 일부분

ajax와 php를 이용한 json파일 핸들링

1. 데이터 추가

• 본 예제에선 해당 데이터의 날짜(date), 시간(time), 제목(title), 설명(description)을 읽어온 뒤 json파일에 추가한다.
• input_data.js에서 addData.php로 전송되는 정보는 path, date, time, title, description이다.
• 파일들은 모두 같은 경로에 있다고 가정한다.

파일 설명:

• input_data.js : 데이터를 추가하는 함수로 createData()로 부터 data를 받아와 ajax를 이용해 addData.php에 data를 넘긴다.
• createData.js : addData.php에 전송할 정보를 만드는 함수로 원하는 데이터의 형식대로 변경이 가능하다.
• addData.php : 만일 이전에 path로 전달된 파일이 존재할 경우 해당 파일에 데이터를 추가하고 존재하지 않을 경우 새로 파일을 만들고 데이터를 저장한다.

input_data.js

function input_data() {
  $.ajax({
    type: "POST",
      url: './addData.php',
      dataType: 'json',
      data: createData(),
      complete : function(result) {
      	//Add logic when complete
      }
  });
}

createData.js

function createData() {
  //Input your filepath
  let filepath = "./data.json";
  let date = "2020-12-04";
  let time = "03:23"
  let title = "Hello world!"
  let desc = "Coding is hard"
  var sendData = {path: filepath, date: date, time: time, title: title, description: desc};
  return sendData;
}

addData.php

<?php
  header("Content-Type: application/json");
  $url = $_POST["path"];
  $json_string = "";
  $R = array();
  //If file exist, read data from url
  if(file_exists($url)) {
    $json_string = file_get_contents($url);
    $R = json_decode($json_string, true);
  }
  $data = array();
  $data["date"] = $_POST["date"];
  $data["time"] = $_POST["time"];
  $data["title"] = $_POST["title"];
  $data["description"] = $_POST["description"];
  array_push($R, $data);
  $data = json_encode($R);
  file_put_contents($url, $data);
?>

input_data 함수 실행 후의 data.json

[{"date":"2020-12-04","time":"03:23","title":"Hello world!","description":"Coding is hard"}]

2. 데이터 읽기

• 본 예제에선 json파일에 저장되어있는 날짜 기준으로 해당 날짜 데이터를 모두 읽어온다.
• searchData.php로 전송되는 정보는 file, date이다.

파일 설명:

• data.json : 데이터가 저장되어 있는 json파일이다.
• searchData.js : date에 저장되어 있는 날짜를 기준으로 데이터를 탐색한다.
• createSearchData : 파일의 위치 경로를 포함하여 데이터를 만든다
• searchData.php : 입력된 날짜를 기준으로 해당 json파일의 date값과 비교하여 일치하는 날짜를 echo하여 searchData.js파일에서 responseText로 확인할 수 있도록 한다.

data.json

[{"date":"2020-12-04","time":"03:23","title":"Hello world!","description":"Coding is hard"},
{"date":"2020-12-03","time":"05:33","title":"Hello json","description":"json is hard"},
{"date":"2020-12-02","time":"04:53","title":"Hello ajax!","description":"ajax is hard"},
{"date":"2020-12-04","time":"12:56","title":"Hello php!","description":"php is hard"}]

searchData.js

function searchData() {
  let date = "2020-12-04";
  $.ajax({
    type: "POST",
      url: './searchData.php',
      dataType: 'json',
      data: createSearchData(date),
      complete : function(result) {
        let arr = result.responseText.split('\n');
        /*
        arr = [];
        */
      }
  });
}

createSearchData.js

function createSearchData(date) {
  let pathname = "./data.json";
  var sendData = {path: pathname, date: date};
  return sendData;
}

searchData.php

<?php
  header("Content-Type: application/json");
  $url = $_POST["path"];
  $json_string = "";
  $R = array();
  if(file_exists($url)) {
    $json_string = file_get_contents($url);
    $R = json_decode($json_string, true);
  }
  $data = array();
  $data["date"] = $_POST["date"];
  for ($i=0; $i < count($R); $i++) {
    if ($R[$i]["date"] == $data["date"]) {
      echo($R[$i]["date"].",".$R[$i]["time"].",".$R[$i]["title"].",".$R[$i]["description"]);
      echo "\n";
    }
  }
?>

실행 후 arr의 값
arr = ["2020-12-04,03:23,Hello world!,Coding is hard",
"2020-12-04,12:56,Hello php,php is hard"]