JavaScript에서 JSON 사용에 대한 자세한 코드 설명-JS 튜토리얼-php.cn

JavaScript에서 JSON 사용에 대한 자세한 코드 설명

yulia

풀어 주다： 2018-09-14 17:50:37

원래의

1482명이 탐색했습니다.

최근 일부 JavaScript 지식을 요약하여 모든 사람과 공유했습니다. 이 기사에서는 JSON에 중점을 두고 JSON과 XML의 차이점, JSON 텍스트 구문 분석 방법 및 JSONP를 설명합니다.
특정 참고 가치가 있습니다. 도움이 필요한 친구들이 살펴보는 것이 도움이 되기를 바랍니다.

1. JSON이란

JSON은 자바스크립트 객체 표기법(JavaScript Object Notation)입니다.

2. JSON과 XML의 비교

동일점: 둘 다 텍스트 정보를 저장하고 교환하는 방법입니다.

차이점: JSON은 XML보다 더 작고 빠르며 구문 분석하기 쉽습니다. JSON이 등장하기 이전에는 XML이 크게 유행했는데, 데이터를 저장하는 기능과 데이터를 전송하는 기능이 있었는데, 시간이 지나면서 XML이 데이터를 전송할 수 없게 되자 나중에 탄생한 JSON이 이를 대체하게 되었습니다. 데이터. 따라서 JSON은 주로 데이터를 전송하는 데 사용되며 XML은 주로 데이터를 저장하는 데 사용됩니다. Ajax에서 JSON을 전송하는 방법에 대해서는 A Brief Analysis of the Use of Ajax 문서를 참조하세요.

3. JSON 구문

데이터는 "이름:값" 쌍에 있고, 데이터는 쉼표로 구분되며, 중괄호는 개체를 저장하고 대괄호는 배열을 저장합니다.
일반적인 JSON 작성 방법:

var sites = [
    { "name":"百度" , "url":"www.baidu.com" }, 
    { "name":"Google" , "url":"www.google.com" }, 
];
或是：
var tx = &#39;{ "sites" : [&#39; +
&#39;{ "name":"百度" , "url":"www.baidu.com" },&#39; +
&#39;{ "name":"Google" , "url":"www.google.com" } ]}&#39;;

로그인 후 복사

4. JSON 텍스트를 구문 분석하는 방법

위의 두 번째 형식으로 javaScript 클래스를 작성하는 경우 JSON을 구문 분석하고 해당 javaScript 객체를 생성해야 합니다.

1, eval() 메소드

이 메소드는 javaScript에 내장된 메소드입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>测试JSON</title>
    <meta name="content-type" content="text/html; charset=UTF-8">
  </head>
  
  <body>
  <div id="name">
  </div>
  <script>
var tx = &#39;{ "sites" : [&#39; +
&#39;{ "name":"百度" , "url":"www.baidu.com" },&#39; +
&#39;{ "name":"Google" , "url":"www.google.com" } ]}&#39;;
var obj = eval ("(" + tx + ")");
alert(obj.sites[0].name+","+obj.sites[0].url);
</script> 
</body> 
</html>

로그인 후 복사

JSON에서 데이터에 액세스하는 방법에는 두 가지가 있습니다. 하나는 obj.sites와 같은 object.key를 통해 얻는 것입니다. [0].url ;다른 하나는 obj.sites[0]["key"]와 같은 객체 ["key"]를 통해 이를 얻는 것입니다. 첫 번째 방법의 장점은 단순성이며, 두 번째 방법의 장점은 문자열을 통해 JSON 객체의 값을 얻는 것입니다. 이는 문자열의 키를 동적으로 이어붙인 후 해당 값을 가져와야 하는 경우에 적용할 수 있습니다. 획득됩니다.

2, JSON.parse() 메서드

위의 eval() 메서드로 구문 분석된 문장을 다음으로 바꾸세요.

var obj = JSON.parse(tx);

3, JSON 배열

Ajax에서 데이터에 접근할 때 서버에서 반환된 JSON 데이터를 구문 분석하는 경우가 많으며 JSON 배열이 더 일반적으로 사용됩니다. 다음으로 저자는 JSON 배열 구문 분석에 대해 설명합니다. SON 배열을 구문 분석하려면 for 루프 또는 for...in... 루프를 사용할 수 있습니다.

for-in을 사용하여 배열에 액세스합니다.

<body>
<p>你可以使用 for-in 来访问数组:</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
    "name":"网站",
    "num":3,
    "sites":[ "Google", "Runoob", "Taobao" ]
};
for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>

로그인 후 복사

for 루프를 사용하여 배열에 액세스합니다.

<body>
<p>使用 for 循环访问数组:</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
    "name":"网站",
    "num":3,
    "sites":[ "Google", "Runoob", "Taobao" ]
};
for (i = 0; i < myObj.sites.length; i++) {
    x += myObj.sites[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>

로그인 후 복사

where myObj.sites.length 사이트 배열의 길이를 얻을 수 있습니다.

5. JSON 개체를 구문 분석하는 방법

JSON을 JSON 텍스트로 구문 분석해야 하는 경우 다음 함수만 사용하면 됩니다.

var JSONString = JSON.stringify(JSONObject); 함수를 구문 분석하지 않으면 개체의 함수가 삭제됩니다. 함수를 문자열로 변환하여 이 문제를 해결할 수 있습니다

var obj = { "name":"Runoob", "alexa":function () {return 10000 ;}, "site": "www.runoob.com"};

//함수를 문자열로 변환

obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);

6. JSONP
JSONP란: JSONP(json width padding), json의 사용 모드입니다.

JSONP의 기능: 웹페이지가 다른 도메인 이름에서 데이터를 가져올 수 있습니다. 즉, 도메인 전체에서 데이터를 읽을 수 있습니다.

JSONP를 사용하는 이유: 동일 출처 정책(NetScape에서 제안한 보안 정책) 때문입니다.
JSP를 사용하여 JSONP 구현

<!DOCTYPE html>
<html>
  <head>
    <title>jsonp.html</title>
    <meta name="content-type" content="text/html; charset=UTF-8">
  </head>
 <body>
<script type="text/javascript">    
    function jsonpCallback(result){     
       alert(result[1].name);     
    } 
</script>  
<script type="text/javascript" src="http://localhost:8080/Jsonp/jsonp.jsp?callback=jsonpCallback"></script> </body>
</html>

로그인 후 복사

서버의 전체 코드:

<%  
     String callback = request.getParameter("callback");  
     out.print(callback+"([ { name:&#39;John&#39;,age:&#39;19&#39;},{ name:&#39;joe&#39;,age:&#39;20&#39;}] );"); 
%>

로그인 후 복사

코드 설명:

데이터를 호출하는 사람이 클라이언트이고 데이터를 보내는 사람이 서버라고 합니다. 서버의 URL에 접근하는 코드에서 클라이언트는 지정된 함수 이름을 가진 매개변수인 jsonCallback을 추가한 후 getParameter를 사용하여 서버의 데이터를 얻어 최종적으로 js 구문에 따라 스트림으로 출력합니다. . 독자는 여기서 위의 서버 측 데이터가 전체 jsp 파일 내용이라는 점에 유의해야 합니다. jsp를 사용하는 것 외에도 독자는 php 또는 jquery 및 기타 기술을 사용하여 서버 측을 구현할 수도 있지만 접미사 이름과 구문이 사용됩니다. 일관성이 있어야 합니다.

위 내용은 JavaScript에서 JSON 사용에 대한 자세한 코드 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!