이야기앱 세상

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

IT/jQuery

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

storya 2016. 3. 24. 19:55
반응형

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');


반응형
0 Comments
댓글쓰기 폼