JSON 사용법


JSON 텍스트를 JavaScript 개체로 변환

JSON의 가장 일반적인 용도 중 하나는 웹 서버에서 JSON 데이터를 파일 또는 HttpRequest로 읽고 JSON 데이터를 JavaScript 개체로 변환한 다음 사용하는 것입니다. 웹 페이지의 데이터입니다.

더 간단하게 설명하기 위해 데모용 입력으로 (파일 대신) 문자열을 사용합니다.

JSON 인스턴스 - 문자열의 개체

JSON 구문을 포함하는 JavaScript 문자열 만들기:

var txt = '{ "employees" : [' +
'{ "firstName":"John" , "lastName ":" Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}' ;

JSON 구문은 JavaScript 구문의 하위 집합이므로 JavaScript 함수 eval()을 사용하여 JSON 텍스트를 JavaScript 개체로 변환할 수 있습니다.

eval() 함수는 JavaScript 컴파일러를 사용하여 JSON 텍스트를 구문 분석한 다음 JavaScript 개체를 생성합니다. 구문 오류를 방지하려면 텍스트를 대괄호로 묶어야 합니다.

var obj = eval ("(" + txt + ")");

웹 페이지에서 JavaScript 개체 사용:

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h2>从 JSON 字符串中创建对象</h2>
<p>
名: <span id="fname"></span><br> 
姓: <span id="lname"></span><br> 
</p> 
<script>
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

var obj = eval ("(" + txt + ")");

document.getElementById("fname").innerHTML=obj.employees[1].firstName 
document.getElementById("lname").innerHTML=obj.employees[1].lastName 
</script>
</body>
</html>

예제 실행»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

JSON Parser

lamp eval() 함수는 모든 JavaScript 코드를 컴파일하고 실행할 수 있습니다. 이는 잠재적인 보안 문제를 숨깁니다.

JSON 파서를 사용하여 JSON을 JavaScript 개체로 변환하는 것이 더 안전합니다. JSON 파서는 JSON 텍스트만 이해하고 스크립트를 컴파일하지 않습니다.

브라우저에서는 기본 JSON 지원과 더 빠른 JSON 파서를 제공합니다.

최신 브라우저와 최신 ECMAScript(JavaScript) 표준에는 JSON에 대한 기본 지원이 포함되어 있습니다.

웹 브라우저 지원웹 소프트웨어 지원

  • Firefox(Mozilla) 3.5

  • Internet Explorer 8

  • Chrome

  • 오페라 10

  • 사파리 4

  • jQuery

  • Yahoo UI

  • Prototype

  • Dojo

  • ECMAScript 1.5

Instance

<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p>
First Name: <span id="fname"></span><br> 
Last Name: <span id="lname"></span><br> 
</p> 
<script>
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

obj = JSON.parse(txt);

document.getElementById("fname").innerHTML=obj.employees[1].firstName 
document.getElementById("lname").innerHTML=obj.employees[1].lastName 
</script>
</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

이전 브라우저의 경우 JavaScript 라이브러리를 사용하세요: https://github.com/douglascrockford/JSON- js

JSON 형식은 원래 Douglas Crockford

에 의해 지정되었습니다.