jQuery.ajax() & json 간단 이미지 동적 로드하기

jQuery.ajax() & json 

이 포스팅에서는 간단하게 ajax 를 이용한 json 파일을 구성해보도록 합니다.

다음의 html, json, script 파일을 구성하여 json 파일을 동적으로 load 해 봅니다.

html

html

<div id="image_container">
    <!-- 이미지 마크업 생성 공간 -->
</div>

images.json 파일

json

{ "images": [
	{"title":"이미지 1","url":"images/img1.jpg"},
	{"title":"이미지 2","url":"images/img2.jpg"},
	{"title":"이미지 4","url":"images/img4.jpg"},
	{"title":"이미지 5","url":"images/img5.jpg"},
	{"title":"이미지 6","url":"images/img6.jpg"}
]}

script

javascript

window.onload = function () {
    startLoadFile();
};

function startLoadFile(){
    $.ajax({
        url: 'images.json',
        type: 'GET',
        dataType : 'json',
        success : function (data) {
            createImages(data)
        }
    });
}

// JSON 포멧 데이터 처리
function createImages(objImageInfo) {
    var images = objImageInfo.images;
    var strDOM = "";
    for (var i = 0; i < images.length; i++) {
        // N번째 이미지 정보를 구하기
        var image = images[i];

        //  N번째 이미지 패널을 생성
        strDOM += '<div class="image_panel">';
        strDOM += '    '<img src="' + image.url + '">';
        strDOM += '    '<p class="title">' + image.title + ''</p>';
        strDOM += ''</div>';
    }
    // 이미지 컨테이너에 생성한 이미지 패널들을 추가하기
    var $imageContainer = $("#image_container");
        $imageContainer.append(strDOM);
}

Jaehee's WebClub