jQuery - jquery.ajax, jquery.getJSON, jquery.post 사용하기

jquery.ajax, jquery.getJSON, jquery.post 사용하기

jQuery.ajax()

==================================

jquery.ajax(url [,settings])

url : 요청하는 URL

settings : key와 value의 쌍으로 된 옵션

jquery.ajax([settings])

settings : key와 value의 쌍으로 된 옵션

cache (default : true, dataType이 'script', 'jsop' 일 경우 fasle) : 페이지 캐시 여부 지정

data : 전송할 데이터

dataType (xml,json,script,html) : 서버로부터 반환 되는 데이터의 타입 지정

error : 에러시 호출되는 함수 지정

success : 성공시 호출되는 함수 지정

type (default : 'GET') : 데이터 전송 방식

url : 요청하는 URL

 

ex)

$.ajax({

        url:'page.jsp',//요청URL

data:{name:'dragon',age:21}, //서버쪽에 전달할 데이터

dataType:'json',

        success:function(data){

$('body').append(data);

},

        error:function(e){

        alert(e);

        }

});

jQuery.getJSON()

===================================

jQuery.getJSON(url [,data][,success(data,textStatus,jqXHR)])

url : 요청하는 URL

data : 전송하고자 하는 데이터

success(data,textStatus,jqXHR): 성공했을 때 호출 되는 함수

ex) 전송되는 데이터가 없을 때

$.getJSON("test.jsp",function(data){

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

output += '<h1>' + item.name + '</h1>';

});

});

ex) 전송되는 데이터가 있을 때

$.getJSON("test.jsp",{data:data},function(data){

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

output += '<h1>' + item.name + '</h1>';

});

});

jQuery.post()

===================================

jQuery.post(url [, data][, success(data,textStatus,jqXHR)][, dataType])

url : 요청하는 URL

data : 전송하는 데이터

success : 성공시 호출되는 함수

dataType (xml,json,script,text,html) : 요청시 전송되는 데이터의 타입

예)

데이터만 전송할 때

$.post('test.jsp',$('#testform').serialize());

데이터를 전송하고 성공하면 함수 호출

$.post('test.jsp',$('#testform').serialize(),function(data){

alert('Data Loaded : ' + data); 

});

 데이터를 전송하고 성공하면 함수 호출 및 dataType 지정

$.post('test.jsp',$('#testform').serialize(),function(data){

alert('Data Loaded : ' + data); 

},'json');