JQUERY 4차시 - AJAX, plug-in

 

//step6(ajax함수 사용)

$(function(){

$('#letter-f form').submit(function(){

$.ajax({

url : 'server3.jsp',

type : 'post',

dataType : 'text',

data : $(this).serialize(), //key-value값을 전체적으로 다 가져옴 (form만 가능)

success : successHandler

});

return false;

});

function successHandler(data){

$('#dictionary').empty();

$('#dictionary').html(data);

}

});

 

//step7 (step 2. json -> ajax로 통합해보기)

$(function(){

   $('#letter-b a').click(function(){

      $('#dictionary').empty();

      $.ajax({

         url:'b.json',

         type:'get',

         dataType:'json',

         success:function(data){

            data.sort(function(a,b){

               if(a.term<b.term){

                  return 1;

               }else if(a.term>b.term){

                  return -1;

               }else return 0;

            });//end sort

           

            $.each(data,function(idx,item){

               var html = '<div class="entry">';

               html += '<h3 class="term">' + item.term + '</h3>';

               html += '<div class="part">'+ item.part + '</div>';

               html += '<div class="definition">'+ item.definition + '</div>';

               html += '</div>';

             

               $('#dictionary').append(html);

            });

         }//end success

      });

      return false;

   });

});

 

 

**blogMission

$(function(){

$(window).on('load', function(){

$.ajax({

url : 'server.jsp',

type : 'post',

dataType : 'json',

success : successHandler

});

});

function successHandler(data){

$('div').empty();

$.each(data, function(index, blog){

//entry에 배열의 첫번째.. 두번쨰..쭉  데이터가 들어온다

var html = '<div class="blog">';

html += '<p class="title">title:' + blog.title + '</h3>';

html += '<p class = "writer">wirter:' + blog.writer + '</p>';

html += 'content<br><p class = "contents">' + blog.contents + '</p>';

html += '</div>';

$('#list').append(html);

});

}

});

 

 

**로그인창 구현해보기!!!!(login.exam)

 

**계산기(chap09)

-cart-html

-scripts-forms.js

 

 

*예제: 함수 단위 코딩으로 만들어진 탭메뉴를 리터럴 방식으로 클래스를 만들어 주세요.

**복잡한 코딩일 경우 함수 단위 코딩으로 만들어서 쪼개기

exam01 - 함수형식

var $tabMenu = null;

var $menuItems = null;

var $selectedMenuItem = null;

$(function(){

init();

initEvent();

});

//요소를 초기화

function init(){

$tabMenu = $('#tabMenu1');

$menuItems = $tabMenu.find('li');

}

//이벤트 등록

function initEvent(){

$menuItems.on('click', function(){

selectedItem($(this));

});

}

//이벤트 핸들러 함수

function selectedItem($menuItem){

if($selectedMenuItem){

$selectedMenuItem.removeClass('select');

}

$selectedMenuItem = $menuItem;

$selectedMenuItem.addClass('select');

}

 

 

exam02 : 함수의 리터럴형식

$(function(){ //객체의 메소드를 사용

tabMenu1.init();

tabMenu1.initEvent();

});

var tabMenu1 = {//객체형식

$tabMenu : null,

$mennuItems : null,

$selectedMenuItem : null,

init : function(){

this.$tabMenu = $('#tabMenu1');

this.$menuItems = this.$tabMenu.find('li');

},

initEvent : function(){

var objThis =  this;

this.$menuItems.on('click', function(){

objThis.selectedItem($(this)); //앞의 this는 클릭한 아이템(this가 변함)

});

},

selectedItem : function($menuItem){

if(this.$selectedMenuItem){

this.$selectedMenuItem.removeClass('select');

}

this.$selectedMenuItem = $menuItem;

this.$selectedMenuItem.addClass('select');

}

};

 

예제02: 함수 단위 코딩으로 만들어진 탭메뉴를 함수 방식 클래스로 만들어 주세요.

 

$(function(){

var tabMenu1 = new TabMenu();

tabMenu1.init();

tabMenu1.initEvent();

});

function TabMenu(){

this.$tabMenu = null;

this.$menuItems = null;

this.$selectedMenuItem = null;

this.init = function(){

this.$tabMenu = $('#tabMenu1');

this.$menuItems = this.$tabMenu.find('li');

}

this.initEvent = function(){

var objThis = this;

this.$menuItems.on('click', function(){

objThis.selectedItem($(this));

});

}

this.selectedItem = function($menuItem){

if(this.$selectedMenuItem){

this.$selectedMenuItem.removeClass('select');

}

this.$selectedMenuItem = $menuItem;

this.$selectedMenuItem.addClass('select');

}

}

 

예제 03: 예제2의 풀이를 활용해 두 번째 탭메뉴가 독립적으로 동작할 수 있게 만들어 주세요.

$(function(){

var tabMenu1 = new TabMenu('#tabMenu1');

var tabMenu2 = new TabMenu('#tabMenu2');

});

function TabMenu(selector){

this.$tabMenu = null;

this.$menuItems = null;

this.$selectedMenuItem = null;

this.init = function(selector){

this.$tabMenu = $(selector);

this.$menuItems = this.$tabMenu.find('li');

}

this.initEvent = function(){

var objThis = this;

this.$menuItems.on('click', function(){

objThis.selectedItem($(this));

});

}

this.selectedItem = function($menuItem){

if(this.$selectedMenuItem){

this.$selectedMenuItem.removeClass('select');

}

this.$selectedMenuItem = $menuItem;

this.$selectedMenuItem.addClass('select');

}

this.init(selector);

this.initEvent();

}

 

 

예제02: 함수 단위 코딩으로 만들어진 탭메뉴를 프로토타입 방식 클래스로 만들어 주세요.

$(function(){

var tabMenu1 = new TabMenu();

tabMenu1.init();

tabMenu1.initEvent();

});

function TabMenu(){

this.$tabMenu = null;

this.$menuItems = null;

this.$selectedMenuItem = null;

}

TabMenu.prototype.init = function(){

this.$tabMenu = $('#tabMenu1');

this.$menuItems = this.$tabMenu.find('li');

}

TabMenu.prototype.initEvent = function(){

var objThis = this;

this.$menuItems.on('click', function(){

objThis.selectedItem($(this));

});

}

TabMenu.prototype.selectedItem = function($menuItem){

if(this.$selectedMenuItem){

this.$selectedMenuItem.removeClass('select');

}

this.$selectedMenuItem = $menuItem;

this.$selectedMenuItem.addClass('select');

}

 

 

--rotation_exam

 

--plug-in