간단한 JQUERY AJAX 예제

보다 자세하고 정확한 내용은 http://api.jquery.com/jQuery.ajax/ 를 참조

 

$.ajax({
    type : "POST" //"POST", "GET"
    , async : true //true, false
    , url : "Inquiry.jsp" //Request URL
    , dataType : "html" //전송받을 데이터의 타입

                               //"xml", "html", "script", "json" 등 지정 가능

                               //미지정시 자동 판단
    , timeout : 30000 //제한시간 지정
    , cache : false  //true, false
    , data : $("#inputForm").serialize() //서버에 보낼 파라메터

                     //form에 serialize() 실행시 a=b&c=d 형태로 생성되며 한글은 UTF-8 방식으로 인코딩

                     //"a=b&c=d" 문자열로 직접 입력 가능

                     //{a:b, c:d} json 형식 입력 가능
    , contentType: "application/x-www-form-urlencoded; charset=UTF-8"
    , error : function(request, status, error) {
     //통신 에러 발생시 처리
     alert("code : " + request.status + "\r\nmessage : " + request.reponseText);
    }
    , success : function(response, status, request) {
     //통신 성공시 처리
     $('#resultDIV').append(response);    
    }
    , beforeSend: function() {
     //통신을 시작할때 처리
     $('#ajax_indicator').show().fadeIn('fast');
    }
    , complete: function() {
     //통신이 완료된 후 처리
     $('#ajax_indicator').fadeOut();
    }
});

 

<!-- 결과를 저장할 영역 -->

<div id="resultDIV">

  <!-- Ajax 로딩시 이미지 출력 영역 -->
  <div id="ajax_indicator" style="display:none">
   <p style="text-align:center; padding:16px 0 0 0; left:50%; top:50%; position:absolute;"><img src="/Report/images/ajax-loader.gif" /></p>
  </div>

</div>

 

참고 : Ajax 호출

$(document).ready(function(){       //도큐먼트 로딩 완료시
$("#inputForm").submit(function(){ //form에서 submit시
$("#searchBtn").click(function(){   //button 클릭시
function search(){                        //일반 함수로 정의하여 버튼 등에 onclick="search()"로 연결
$(function(){                                //스크립트 로드시