/**
 * jQuery 를 이용한 Ajax 호출 샘플 코드
 * 보통 함수에 Ajax 실행 함수를 넣어놓고 호출하여 사용합니다.
 * 아래 Ajax 속성값을 이용하여 사용합니다.
 * 필수 사용 : typr, url, dataType success
 * 필수 JS 파일 : common.js (jQuery 라이브러리 파일)
 */

  $.ajax({    // 실행 함수
   type:"POST",   // get.post 가능
   url:"ajax.jsp",    //  호출 url
   dataType: "json",                  //date 타입  xml,text 등
   data:"point=1&gift=2",    // url 에 보낼 파라미터 값
   timeout:3000,             //제한시간 설정 가능
   cache:false,                // true, false
   error:function(request, status, error){  // 에러 발생 시   status 400 이 성공 그 외 404, 500 등
    alert("에러!");
   },
   success:function(msg){    // 성공 시 콜백  msg 에 data
    alert("성공");
   },
   beforeSend:function(){    // ajax 통신을 시작하기 전에 콜백
    alert("통신시작");
   },
   complete:function(){       //완료 후 실행할 콜백 함수 정의
    alert("통신완료");
   }
  });

  /**
   *  상황에 따라 적절하게 함수 사용 아래 상황 예제 샘플
   */
  
  // html document  완성 시  onload 와 유사함
   jQuery(document).ready(function(){
    $.ajax({
     type:"GET",
     url:"ajax.jsp",
     data:param,
     success:function(msg){
      view_area.innerHTML = msg;
     }
    });
   });

  
   // 엘리먼트 클릭 등 dom 의 변화에 따른 이벤트  id , class 등 지정 가능
  $(function() {
   $('.divId').click(function() {  // function 으로 감싸지 않고 아래의 예제처럼도 사용가능
    
   });
  }); 
  
  // form submit 시 콜백 id, class 등 지정
  $("formName").submit(function(){
   
  });
  
   // 함수 호출을 통한 ajax
   function dom_start(_cnt1,_cnt2){
   $.ajax({
    type:"POST",
    url:"ajax.jsp",
    data:param,
    success:function(msg){
     view_area.innerHTML = msg;
    }
   });
   }
  
  

'jQuery' 카테고리의 다른 글

jQuery json load  (0) 2012.01.10
jquery 정리  (0) 2011.12.26
jQuery 커버플로우  (0) 2011.07.29
jQuery 유용한 함수(?) eq  (0) 2011.06.23
jQuery 애니메이션 메뉴 펼치기 접기  (0) 2011.06.23
블로그 이미지

스마트전

,