찾다
  • 로그인
  • 가입
비밀번호 재설정 성공

당신이 관심을 갖고 있는 프로젝트를 팔로우하고 그들에 관한 최신 뉴스를 맛보세요

자바스크립트 JSON

JSON은 JavaScript Object Notation의 약어로, 데이터 교환 형식입니다.

JSON이란 무엇인가요?

JSON의 정식 영어 이름은 JavaScript Object Notation입니다.

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

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

JSON은 이해하기 쉽습니다.


JSON에는 몇 가지 데이터 유형만 있습니다.

number: JavaScript의 숫자와 정확히 동일합니다.

boolean: JavaScript의 true 또는 false입니다.

null: JavaScript의 null입니다.

array: JavaScript의 배열 표현입니다. -

객체: {...} 자바스크립트의 표현

및 위 항목의 조합.

게다가 JSON도 문자셋이 UTF-8이어야 한다고 규정하고 있어 다국어 표현에 문제가 없습니다. 통합 구문 분석의 경우 JSON 문자열은 큰따옴표 ""를 사용해야 하며 개체 키도 큰따옴표 ""를 사용해야 합니다.

JSON은 매우 간단하기 때문에 웹 세계에서 빠르게 인기를 얻었고 ECMA 표준이 되었습니다. 거의 모든 프로그래밍 언어에는 JSON을 구문 분석하기 위한 라이브러리가 있으며, JavaScript에서는 JSON 구문 분석이 내장되어 있기 때문에 JSON을 직접 사용할 수 있습니다.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<script type="text/javascript">  
var student = new Object(); 
student.name = "Lanny"; 
student.age = "25"; 
student.location = "China"; 
var json = JSON.stringify(student); 
alert(json); //{"name":"Lanny","age":"25","location":"China"}
</script>  
</head>  
<body>  
</body>  
</html>

JSON은 JavaScript 개체로 형식화되었습니다.

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 문자열을 만듭니다.

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

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

var obj = JSON.parse(text);

마지막으로 페이지에서 새로운 JavaScript 개체 사용:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<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[2].firstName + " " + obj.employees[2].lastName;
</script>
</body>
</html>



새로운 파일
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> var arr = ["a", "b", "c"]; var str = JSON.stringify(arr); document.write(str); document.write ("<br/>"); var newArr = JSON.parse(str); while (newArr.length > 0) { document.write(newArr.pop() + "<br/>"); } // Output: var arr = ["a", "b", "c"]; var str = JSON.stringify(arr); document.write(str); document.write ("<br/>"); var newArr = JSON.parse(str); while (newArr.length > 0) { document.write(newArr.pop() + "<br/>"); } </script> </head> <body> </body> </html>
시사 Clear
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~