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" 문자열로 직접 입력 가능

, 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> --- * Ajax 호출시 참고 $(document).ready(function(){ //도큐먼트 로딩 완료시 $("#inputForm").submit(function(){ //form에서 submit시 $("#searchBtn").click(function(){ //button 클릭시 function search(){ //일반 함수로 정의하여 버튼 등에 onclick="search()"로 연결 $(function(){ //스크립트 로드시 출처 : <http://devx.tistory.com/entry/%EA%B0%84%EB%8B%A8%ED%95%9C-jQuery-Ajax-%EC%98%88%EC%A0%9C%EA%B0%84%EB%8B%A8%ED%95%9C-jQuery-Ajax-%EC%98%88%EC%A0%9C-%EC%B6%9C%EC%B2%98-%EA%B0%84%EB%8B%A8%ED%95%9C-jQuery-Ajax-%EC%98%88%EC%A0%9C%EC%9E%91%EC%84%B1%EC%9E%90-my1over>