555
No
1. JSON 테스트
test_json.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
// 현재 폴더에 있는 test_data1.json파일에서 데이터를 가져옴
$.getJSON('./test_data1.json', function(data) {
// p태그의 내용에 가져온 데이터를 차례로 넣고 <br/>태그로 줄바꿈을 해줌
$('#result').html( data.name + '<br/>' + data.age + '<br/>' + data.email);
});
});
</script>
</head>
<body>
<p id="result"></p>
</body>
</html>
test_data1.json
{
"name": "홍길동",
"age": 26,
"email": "gdhong@somedomain.com"
}
출력
| 홍길동 26 gdhong@somedomain.com |
=>http://braverokmc2.dothome.co.kr/junho/ex19/test_json.html
2. JSON Simple Binding 테스트
simple_binding.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function(e) {
// 현재 폴더의 test_data2.json파일에서 데이터 읽기
$.getJSON('./test_data2.json', function(data) {
// 동적으로 생성할 마크업 저장할 변수 초기화
var strResult="";
$.each(data.items, function(key, value) {
// value에 들어있는 name, age, email의 값으로 동적으로 목록 마크업을 생성함
strResult +=
"<li><h1>" + value.name + "</h1>" +
"<h2>" + value.age + "</h2>" +
"<p>" + value.email + "</p>" +
"</li>";
// ul 엘리먼트의 내용에 생성된 마크업 추가함
$("#result").append(strResult);
// 저장된 마크업 새로 리셋
strResult = "";
});
// 새로고침을 하여 화면에 표시
$("#result").listview("refresh");
});
});
</script>
</head>
<body>
<ul id="result"></ul>
</body>
</html>
test_data2.json
{
"items": [{
"name": "유재석",
"age": 35,
"email": "sjyou@somedomain.com"
}, {
"name": "박명수",
"age": 30,
"email": "mspark@somedomain.com"
}, {
"name": "정준하",
"age": 45,
"email": "jhjung@somedomain.com"
}]
}
출력=>
http://braverokmc2.dothome.co.kr/junho/ex19/simple_binding.html
3 JSON Binding
data_binding.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
// 현재 폴더의 test_data2.json파일에서 데이터 읽기
$.getJSON('./test_data2.json', function(data) {
// 동적으로 생성할 마크업 저장할 변수 초기화
var strResult="";
$.each(data.items, function(key, value) {
// value에 들어있는 name, age, email의 값으로 동적으로 목록 마크업을 생성함
strResult +=
"<li><h1>" + value.name + "</h1>" +
"<h2>" + value.age + "</h2>" +
"<p>" + value.email + "</p>" +
"</li>";
// ul 엘리먼트의 내용에 생성된 마크업 추가함
$("#result").append(strResult);
// 저장된 마크업 새로 리셋
strResult = "";
});
// 새로고침을 하여 화면에 표시
$("#result").listview("refresh");
});
});
</script>
</head>
<body>
<div data-role="page" id="list_page">
<div data-role="header" >
<h1>데이터바인딩</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="result"></ul>
</div>
<div data-role="footer" data-theme="b">
<h4>HMAPS.net</h4>
</div>
</div>
</body>
</html>
test_data2.json
{
"items": [{
"name": "유재석",
"age": 35,
"email": "sjyou@somedomain.com"
}, {
"name": "박명수",
"age": 30,
"email": "mspark@somedomain.com"
}, {
"name": "정준하",
"age": 45,
"email": "jhjung@somedomain.com"
}]
}
출력 =>
http://braverokmc2.dothome.co.kr/junho/ex19/data_binding.html
4 flickr photo binding
flickr_photo_binding.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<style type="text/css">
.img_full {
/* 이미지가 화면 가득 보이도록 너비값 설정*/
width: 100%;
}
.img_thumb {
/* 목록의 이미지의 위치를 보정*/
margin: 0.8em;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 포토 스트림 목록의 메인 페이지-->
<div data-role="page" id="list_page">
<!-- 홈 아이콘이 있는 헤더 용 제목 준비-->
<div data-role="header" >
<a class="ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext" href="#">Home</a>
<h1>Flickr 포토스트림</h1>
</div>
<div data-role="content" id="result_list">
<!-- 썸네일 이미지 목록 표시 -->
</div>
<div data-role="footer" data-theme="b">
<h4>Braverokmc.net</h4>
</div>
</div>
<!-- 포토의 상세 페이지-->
<div data-role="page" id="detail_page">
<!-- 돌아가기 버튼이 있는 헤더 용 제목 준비-->
<div data-role="header" data-add-back-btn="true">
<h1 id="result_title"></h1>
</div>
<div data-role="content">
<!-- 상세 이미지 출력 -->
<div id="result_detail"></div>
</div>
<div data-role="footer" data-theme="b">
<h4>Braverokmc.net</h4>
</div>
</div>
<!-- 플리커에서 읽은 JSON 데이터 바인딩 하기 -->
<script>
// 메인 페이지에 JSON으로 읽힌 정보를 하나씩 꺼내서 동적으로 목록 생성
function jsonFlickrFeed(data) {
// 동적으로 마크업할 변수 및 초기값으로 ul 엘리먼트의 목록 생성
var strResult = "<ul data-role='listview'>";
// JSON으로 읽힌 정보를 하나씩 꺼내서 동적으로 목록 생성
$.each(data.items, function(key, value) {
// li 엘리먼트 안에 제목, 썸네일 이미지, 링크 생성
// 링크 이동 시 show_detail() 함수를 호출하여 이미지 경로값을 전달하도록 생성
strResult +=
"<li><a href='#detail_page' onclick='show_detail(\"" + value.media.m.replace("_m.jpg","_b.jpg") + "\",\"" + value.title + "\")'>" +
"<img src='" + value.media.m + "' class='img_thumb'>" +
"<h2>" + value.title + "</h2>" +
"</a></li>";
});
// 완성된 목록을 출력
$("#result_list").html(strResult + "</ul>");
};
// 포토의 상세 페이지에 내용을 동적으로 생성
function show_detail(link_url, title) {
// 헤더에 제목 출력
$("#result_title").html(title);
// 전달받은 이미지 경로를 이용해서 전체 크기의 이미지 태그 생성 및 출력
$('#result_detail').html("<img src='" + link_url + "' class='img_full'>");
}
</script>
<!-- 플리커 API를 통해 포토 지정한 id와 태그의 JSON 데이터 읽기-->
<script src="http://api.flickr.com/services/feeds/photos_public.gne?id=137506863@N06&format=json&tags=MDLife"></script>
</body>
</html>
결과 =>
http://braverokmc2.dothome.co.kr/junho/ex19/flickr_photo_binding.html
5 wordpress contents biding
wordpress_contents_biding.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 워드프레스에서 편집한 스타일 준비-->
<link rel="stylesheet" href="http://hmaps.dothome.co.kr/wp-content/themes/twentyfifteen/style.css?ver=4.3.1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<style>
.img_thumb {
/* 썸네일 이미지의 위치를 보정 */
margin: 0.4em;
/*썸네일 이미지의 모서리 약간 둥글게 라운드 변경*/
border-radius: 4px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 워드프레스 목록의 메인 페이지-->
<div data-role="page" id="list_page">
<!-- 홈,검색 아이콘이 있는 헤더 용 제목 준비-->
<div data-role="header">
<a class="ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext" href="#">Home</a>
<h1>워드프레스 콘텐츠</h1>
<a class="ui-btn ui-corner-all ui-icon-search ui-btn-icon-notext" href="#">Search</a>
</div>
<div data-role="content" id="result_list">
<!-- 썸네일 이미지와 목록 내용 출력 -->
</div>
<div data-role="footer" data-theme="b">
<h4>Braverokmc.net</h4>
</div>
<!-- /footer -->
</div>
<!-- 워드프레스의 상세 페이지-->
<div data-role="page" id="detail_page">
<!-- 돌아가기 버튼이 있는 헤더 용 제목 준비-->
<div data-role="header">
<a class="ui-btn ui-corner-all ui-icon-back ui-btn-icon-notext" href="#list_page">Back</a>
<h1 id="result_title"></h1>
</div>
<div data-role="content" id="result_detail">
<!-- 상세 워드프레스 내용 출력 -->
</div>
<div data-role="footer" data-theme="b">
<h4>Braverokmc.net</h4>
</div>
</div>
<!-- 워드프레스에서 읽은 JSON 데이터 바인딩 하기 -->
<script>
// 메인 페이지에 JSON으로 읽힌 정보를 하나씩 꺼내서 동적으로 목록 생성
function get_list(data) {
// 동적으로 마크업할 변수에 검색 입력 폼과 ul목록을 연결하여 생성
// 검색 폼을 통해 목록의 데이터 필터 검색 연결
var strResult = "<form class='ui-filterable'>"
+ "<input id='searchposts' data-type='search'>"
+ "</form>"
+ "<ul data-role='listview' data-inset='true' data-filter='true' data-input='#searchposts'>";
// JSON으로 읽힌 정보를 하나씩 꺼내서 동적으로 목록 생성
$.each(data.posts, function(key, value) {
// li 엘리먼트 안에 제목, 썸네일 이미지, 링크 생성
// 링크 이동 시 show_detail() 함수를 호출하여 콘텐츠 id값을 전달하도록 생성
strResult +=
"<li><a href='#detail_page' onclick= show_detail(" + value.id + ")>" +
"<img src='" + value.thumbnail + "' class='img_thumb'>" +
"<h2>" + value.title + "</h2>"+
"</a></li>";
});
// 완성된 목록을 출력
$("#result_list").html(strResult + "</ul>");
};
// 워드프레스의 상세 페이지에 전달받은 id의 글을 다시 읽어 동적으로 생성
function show_detail(id) {
// 전달받은 id값으로 해당 워드프레스 콘텐츠 전문의 JSON 값을 읽어옴
$.getJSON('http://hmaps.dothome.co.kr/?json=get_post&post_id=' + id + '&callback=?', function(data) {
// 헤더에 제목 출력
$("#result_title").html(data.post.title);
// 전달받은 콘텐츠 데이터를 이용해서 전체 내용 태그 생성 및 출력
$("#result_detail").html(data.post.content);
});
}
</script>
<!-- 워드프레스 JSON API를 통해 지정한 번호와 개수의 글 읽은 후 get_list() 호출-->
<script src="http://hmaps.dothome.co.kr/?json=get_recent_posts&count=5&callback=get_list"></script>
</body>
</html>
결과
=> http://braverokmc2.dothome.co.kr/junho/ex19/wordpress_contents_biding.html
35강 - JSON이란, JSON 데이터 실습
36강 - JSON 데이터바인딩 실습
37강 - JSON 제이쿼리모바일 실습
댓글 ( 4)
댓글 남기기