준비물
웹페이지를 작성할 같은 경로에 json.txt파일을 만들고 내용은 Table 2을 입력한다.
|
{ "title":"JSON Sample Data", "items":[{ "name":"text", "value":"text data" },{ "name":"integer", "value":100 },{ "name":"float", "value":5.65 },{ "name":"boolean", "value":false }] } |
Table 2 Json data
Dojo Ajax JSON Example Code
|
<html> <head> <script src="dojo-release-1.9.1/dojo/dojo.js"></script> <script> require(["dojo/dom", "dojo/request", "dojo/json", "dojo/_base/array", "dojo/domReady!"], function(dom, request, JSON, arrayUtil){ var resultDiv = dom.byId("resultDiv"); request.get("json.txt", { handleAs: "json" }).then(function(data){ var html = "<h2>JSON Data</h2>" + "<p>JSON encoded data:</p>" + "<p><code>" + JSON.stringify(data) + "</code></p>"+ "<h3>Accessing the JSON data</h3>" + "<p><strong>title</strong> " + data.title + "</p>" + "<p><strong>items</strong> An array of items." + "Each item has a name and a value. The type of " + "the value is shown in parentheses.</p><dl>";
arrayUtil.forEach(data.items, function(item,i){ html += "<dt>" + item.name + "</dt><dd>" + item.value + " (" + (typeof item.value) + ")</dd>"; }); html += "</dl>";
resultDiv.innerHTML = html; }, function(error){ resultDiv.innerHTML = error; }); } ); </script> </head> <body> <div id=resultDiv > </div> </body> </html> |
Table 3 Ajax JSON Example Code
Code 설명
<body>내의 resultDiv를 불러오기 위해 dojo/dom을 불렀고 dojo/json은 JSON 데이터의 형식을 쓰기 때문에 호출하였다. dojo/_base/array는 array의 forEach 함수를 이용하여 데이터 전체를 가져오기 위하여 호출된 module이다. 현재 request.get을 이용하여 get 방식으로 요청하고 있으며 데이터 타입은 JSON으로 지정하였다. 요청된 데이터는 data parmeter로 들어가게 되는데 forEach문으로 데이터를 하나씩 html 변수안에 저장하고 있다.
결과 화면
Figure 3 Table 3의 결과 화면
'Dojo > Ajax' 카테고리의 다른 글
| 3. Dojo Ajax Data transmit (0) | 2013.08.08 |
|---|---|
| 1. Dojo Simple Ajax (0) | 2013.08.08 |