자바스크립트 JSON

JSON은 데이터를 저장하고 전송하는 데 사용되는 형식입니다.

JSON은 일반적으로 서버에서 웹 페이지로 데이터를 전송하는 데 사용됩니다.


JSON이란 무엇인가요?

  • JSON, 전체 영어 이름은 JavaScript Object Notation

  • JSON은 경량 데이터 교환 형식입니다.

  • JSON은 독립적인 언어입니다. *

  • JSON은 이해하기 쉽습니다.


Tip: JSON은 JavaScript 구문을 사용하지만 JSON 형식은 텍스트일 뿐입니다.
텍스트는 모든 프로그래밍 언어로 읽을 수 있으며 데이터 형식으로 전달될 수 있습니다.


다음 JSON 구문은 직원 개체를 정의합니다. 3개의 직원 레코드 배열(객체):

{"employees":[
 {"firstName":"John", "lastName":"Doe"} ~                      {"firstName":"Peter", "lastName":"Jones"}
]}


JSON 형식 지정 JSON 형식은 JavaScript 개체를 생성하는 코드와 구문이 동일합니다. 비슷하기 때문에 JavaScript 프로그램은 JSON 데이터를 JavaScript 개체로 쉽게 변환할 수 있습니다.

JSON 구문 규칙


데이터는 키/값 쌍입니다.

    데이터는 쉼표로 구분됩니다.
  • 중괄호는 객체 저장
  • 대괄호는 배열 저장
  • JSON 데이터 - 하나의 이름은 하나의 값에 해당합니다

JSON 데이터 형식은 JavaScript 객체 속성과 마찬가지로 키/값 쌍입니다.

키/값 쌍은 필드 이름(큰따옴표 안), 콜론, 값으로 구성됩니다.

"firstName":"John"


JSON 개체

JSON 개체 대괄호 안에 크게 저장됩니다.

JavaScript와 마찬가지로 객체는 여러 키/값 쌍을 보유할 수 있습니다.

{"firstName":"John", "lastName":"Doe"}


JSON 배열

JSON 배열 대괄호 안에 저장됩니다.

JavaScript와 마찬가지로 배열에는 객체가 포함될 수 있습니다:

"employees":[
 {"firstName":"John", "lastName":"Doe"},
 {"firstName":"Anna", " lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]

위 예에서 "employees" 개체는 배열입니다. 세 개의 개체가 포함되어 있습니다.

각 개체는 직원(성과 이름)의 기록입니다.


JSON 문자열을 JavaScript 객체로 변환

보통 우리는 서버에서 JSON 데이터를 읽고 웹 페이지에 데이터를 표시합니다.

단순화를 위해 웹 페이지에서 직접 JSON 문자열을 설정합니다.

먼저 JavaScript 문자열을 만듭니다. 문자열은 JSON 형식의 데이터입니다.

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

그런 다음 JavaScript 내장 함수 JSON.parse()를 사용하여 문자열을 JavaScript 개체로 변환합니다.

var obj = JSON. 구문 분석(텍스트);

마지막으로 페이지에서 새 JavaScript 개체를 사용합니다.

Instance

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<h2>为 JSON 字符串创建对象</h2>
<p id="demo"></p>
<script>
    var text = '{"employees":[' +
            '{"firstName":"John","lastName":"Doe" },' +
            '{"firstName":"Anna","lastName":"Smith" },' +
            '{"firstName":"Peter","lastName":"Jones" }]}';
    obj = JSON.parse(text);
    document.getElementById("demo").innerHTML =
            obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
</body>
</html>

프로그램을 실행하여 사용해 보세요


관련 기능

Function 설명
JSON.parse()는 JSON 문자열을 JavaScript 개체로 변환하는 데 사용됩니다.
JSON.stringify()는 JavaScript 값을 JSON 문자열로 변환하는 데 사용됩니다.



지속적인 학습
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h2>为 JSON 字符串创建对象</h2> <p id="demo"></p> <script> var text = '{"employees":[' + '{"firstName":"John","lastName":"Doe" },' + '{"firstName":"Anna","lastName":"Smith" },' + '{"firstName":"Peter","lastName":"Jones" }]}'; obj = JSON.parse(text); document.getElementById("demo").innerHTML = obj.employees[1].firstName + " " + obj.employees[1].lastName; </script> </body> </html>
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~