2022. 10. 15. 04:38ㆍProgram/PHP
153_PHP 자바스크립트로 JSON 데이터 다루기
[요약]
- 자바스크립트는 서버 환경을 구축하지 않고도 사용할 수 있는 웹브라우저에서 작동하는 프로그래밍 언어이다.
- 자바스크립트에서 JSON 언어를 다루는 방법에 대해 알아보자.
JSON은 서로 다른 프로그래밍 언어 간에 데이터를 전달하기 위한 언어이다.
여기서 JSON을 다루는 이유는 PHP 언어와 JavaScript라는 언어 간에 데이터를 전달하기 위함이다.결론적으로 어떠한 버튼을 눌렀을 때 페이지의 변환 없이 서버단(PHP)에서 처리한 결과를 받아서 어떠한 행동을 하는 것을 구현하기 위함이다.클라이언트 사이드에서 JSON 데이터를 학습 후 서버사이드에서 JSON 데이터를 다르는 방법을 알아보자.
클라이언트 사이트에서는 자바스크립트라는 언어를 사용한다.자바스크립트는 html 태그의 head 태그 내에 script 태그를 생성하여 script 태그 내에서 사용한다.자바스크립트에 대해서는 PHP와 데이터 교환을 위한 최소한의 내용만 다루도록 하겠다.
[자바스크립트 사용 방법]
<head>
<script>
// 이곳에서 자바스크립트 언어 사용
</script>
</head>자바스크립트 언어는 head 태그 내에 script 태그를 생성하여 작성한다.
자바스크립트에서 데이터의 결과를 보기 위해 사용하는 함수는 console.log() 가 있다.
[console.log() 사용 방법]
console.log(표시할 데이터)console.log() 함수가 출력하는 데이터는 크롬 인스펙터의 콘솔 탭에서 확인할 수 있다.
크롬 인스펙터를 열고 닫느 단축키는 PC의 경우 F12 버튼을 누르면 된다.
JSON 데이터를 사용하려면 자바스크립트의 변수에 해당 JSON 데이터를 대입한다.
다음과 같은 JSON 데이터가 있다고 가정하자.
{userID:'michael'}위의 JSON 데이터에 접근하려면 변수에 대입한다.
다음은 변수에 앞의 JSON 데이터를 대입한 코드이다.
data = {userID:'michael'};data 변수에 있는 JSON 데이터의 변수 userID의 값을 얻으려면 JSON 데이터를 대입한 변수명에 점(.)을 붙여 JSON 데이터의 변수명을 입력한다.
다음과 같이 접근할 수 있다.
data.userID
console.log() 함수를 사용하여 data.userID의 값을 확인하는 방법은 다음과 같다.
console.log(data.userID);
다음은 JSON 데이터를 변수에 대입하고 값을 확인하는 예제이다.
[예제: 156-1_json-script.php ]
<!DOCTYPE html>
<html lang="ko">
<head>
<script>
data = {userID:'michael'};
console.log(data.userID);
</script>
</head>
</html>실행결과
console.log()를 사용하여 값을 확인할 때는 반드시 콘솔창을 열어야 확인이 가능하다.따라서 크롬 익스텐션을 켜서 콘솔창을 선택한 후 값을 확인할 수 있다.
위 그림을 보면 data.userID의 값으로 michael이 출력되었음을 확인할 수 있다.
JSON의 userID 값이 배열일 떄 데이터를 가져오는 방법에 대해 알아보자.
JSON 데이터가 다음과 같아면 userID의 데이터는 배열로 되어 있으므로 first값은 0인덱스, second 값은 1인덱스, third값은 2 인덱스로 가져올 수 있다.
data = {userID:['first','second','third']}
first값을 가져온다면 코드는 다음과 같다.
data.userID[0];
다음은 JSON 데이터가 배열일 때 값을 가져오는 예제이다.
[예제: 156-2_json-script.php ]
<!DOCTYPE html>
<html lang="ko">
<head>
<script>
data = {userID:['first','second','third']};
console.log(data.userID[0]);
console.log(data.userID[1]);
console.log(data.userID[2]);
</script>
</head>
</html>실행결과
이번에는 조금 더 복잡한 구조의 JSON 데이터를 다루어보자.다음과 같은 JSON 데이터가 있다.
{student:[{name:'yuna',score:{math:4,english:5,science:6}},{name:'son',score:{math:7,english:8,science:9}}]}위와 같이 한줄로 작성되어 있으면 보기에 어려울 수 있으므로 보기 쉽게 표현하면 다음과 같다.
{student:
[
{name:'yuna',
score:{
math:4,
english:5,
science:6
}
},
{name:'son',
score:{
math:7,
english:8,
science:9
}
}
]
}
위의 JSON 데이텅에서 name 변수의 첫 번째 데이터의 score 변수의 math 변수의 값을 가져온다면 코드는 다음과 같다.
data.student[0].score.math;
다음은 위의 코드에 대한 예제이다.
[예제: 156-3_json-script.php ]
<!DOCTYPE html>
<html lang="ko">
<head>
<script>
data = {
student: [{
name: 'yuna',
score: {
math: 4,
english: 5,
science: 6
}
}, {
name: 'son',
score: {
math: 7,
english: 8,
science: 9
}
}]
};
console.log(data.student[0].score.math);
</script>
</head>
</html>실행결과
초보자를 위한 PHP 200제
김태영 지음 | 정보문화사
'Program > PHP' 카테고리의 다른 글
| [PHP] PHP에서 데이터를 JSON으로 만들기 json_encode() (0) | 2022.10.17 |
|---|---|
| [PHP] PHP에서 JSON 데이터 다루기 file_get_contentes(), json_decode() (0) | 2022.10.15 |
| [PHP] JSON이란... (0) | 2022.10.15 |
| [PHP] 이미지 파일을 서버에 업로드하기 move_uploaded_file() (1) | 2022.10.13 |
| [PHP] 파일 내용 불러오기 fread() (0) | 2022.10.13 |