jQuery Ajax Sample

모터 사이클 부츠 온라인 판매 사이트 - 출처: jQuery in Action;인사이트 -

[1단계]

$(function(){

// 부츠의 style을 옵션으로 로딩...

$('#bootChooserControl').load(/action/fetchBootStyleOptions');

// 부츠의 style을 선택하면 상세정보 출력

$('#bootChooserControl').change(function(event){

$('#productDetailPane').load(

'action/fetchProductDetails',        // URL

{style:$(event.target).val()},        // Parameter

function(){ $('[value=""]', event.target).remove(); }    // callback

// context > event.target 에서 value=''인 엘리먼트 삭제

);

});

});

load() 대신 $.get() 사용하기

$('#bootChooserControl').change(function(event){

$.get(

'action/fetchProductDetails',

{style:$(event.target).val()},

function(response){ 

$('#productDetailPane').html(response);

$('[value=""]', event.target).remove(); 

}

);

});

[2단계]

$(function() {

$('#bootChooserControl').load('/html5_ex/bootcloset/actions/fetchBootStyleOptions.php');

$('#bootChooserControl').change(function(event){

$('#productDetailPane').load(

'/html5_ex/bootcloset/actions/fetchProductDetails.php',

$(this).serialize()

);

$('#colorChooserControl').load(

'/html5_ex/bootcloset/actions/fetchColorOptions.php',

$(this).serialize(),

function(){

$(this).attr('disabled',false);

$('#sizeChooserControl').attr('disabled',true).html("");

}

);

});

$('#colorChooserControl').change(function(event){

$('#sizeChooserControl').load(

'/html5_ex/bootcloset/actions/fetchSizeOptions.php',

$('#bootChooserControl, #colorChooserControl').serialize(),

function(){

$(this).attr('disabled',false);

}

);

});

$('#selectionsPane').change(function(event){

$('[value=""]',event.target).remove();

});

});

[3단계] 

phase.4a.html

$(function() {

$('#bootChooserControl').load('/html5_ex/bootcloset/actions/fetchBootStyleOptions.php');

$('#bootChooserControl').change(function(event){

$('#productDetailPane').load(

'/html5_ex/bootcloset/actions/fetchProductDetails.php',

$('#bootChooserControl').serialize(),

function(){ $('abbr').termifier('/html5_ex/bootcloset/actions/fetchTerm.php'); }

// load 된 html에 포함된 <tag>에 사용 - callback 함수

);

$('#colorChooserControl').load(

'/html5_ex/bootcloset/actions/fetchColorOptions.php',

$('#bootChooserControl').serialize(),

function(){

$('#colorChooserControl').attr('disabled',false);

$('#sizeChooserControl')

.attr('disabled',true)

.find('option').remove();

}

);

});

$('#colorChooserControl').change(function(event){

$('#sizeChooserControl').load(

'/html5_ex/bootcloset/actions/fetchSizeOptions.php',

$('#bootChooserControl,#colorChooserControl').serialize(),

function(){ $('#sizeChooserControl').attr('disabled',false); }

);

});

$('#selectionsPane').change(function(event){

$('[value=""]',event.target).remove();

});

$('body').ajaxComplete(function(event, xhr, options){

//options: $.ajax(options)의 options

// #productDetailPane 이 load 되면

if (options.url.indexOf('fetchProductDetails') != -1) {

$('div.termifier').remove();

}

});

});

[jquery.termifier.js]

jquery.jqia.termifier.js

(function($){

$.fn.termifier = function(actionURL, options) {

var settings = $.extend({

origin: {top:0, left:0},

paramName: 'term',

addClass: null,

actionURL: actionURL

},options||{});

     this.click(function(event){

$('div.termifier').remove();

$('<div>')

.addClass('termifier' + (settings.addClass ? (' ') + settings.addClass : ''))

.css({

position: 'absolute',

top: event.pageY - settings.origin.top,

left: event.pageX - settings.origin.left,

display: 'none'

})

.click(function(event){

$(this).fadeOut('slow');

})

.appendTo('body')

.append(

$('<div>').load(

settings.actionURL,

encodeURIComponent(settings.paramName) + '=' + encodeURIComponent($(event.target).text()),

function(){ $(this).closest('.termifier').fadeIn('slow'); }

)

);

});    

this.addClass('termified');

return this;

};

})(jQuery);