http://hyeonstorage.tistory.com/65
6. Ajax
$.param() <jQuery.param()> : 폼 요소들의 값을 변환하여 직렬화된 문자열로 표현한다.
var params = {width : 1680, height : 1050}; // 배열 선언
var str = $.param(params); // Ajax로 전송가능하도록 직렬화
// $.param({a:[2,3,4]}); // "a[]=2&a[]=3&a[]4"
// $.param({a:{b:1,c:2},d:[3,4,{e:5}] }); // "a[b]=1&a[c]=2&d[]=3&d[]=4&d[2][e]=5"
.serialize() : 선택한 form의 데이터를 ajax로 전송할 수 있도록 직렬화 한다.
/ $("#name").serialize(); // id name form의 데이터를 직렬화한다. a=1&b=2
.serializeArray() : 선택한 form의 데이터를 ajax로 전송할 수 있도록 배열로 직렬화 한다.
/ $("#name").serializeArray(); // id name form의 데이터를 배열로 직렬화한다. [ { name : "a", value : "1" }, { name : "c", value:"3"}]
$.ajax() <jQuery.ajax()> : ajax 비동기 호출 전송
$.ajax({
type : 'POST', // post 타입 전송
url : 'some.php', // 전송 url
data : "name=John&location=Boston", // 전송 파라미터
cache : false, // ajax로 페이지를 요청해서 보여줄 경우
// cache가 있으면 새로운 내용이 업데이트 되지 않는다.
async : true, // 비동기 통신, false : 동기 통신
beforSend : fucntion(){ // ajax 요청이 전송되기 전 실행 함수
},
success : function(msg){ // 콜백 성공 응답시 실행
},
error : function(){ // Ajax 전송 에러 발생시 실행
},
complete : function(){ // success, error 실행 후 최종적으로 실행
}
});
.ajaxSend() : ajax 요청이 서버로 보내지기전에 호출됨
.ajaxStart() : ajax 요청이 서버로보내진 직후에 호출됨.
.ajaxStop() : 응답을 서버로부터 받은 직후에 호출됨
.ajaxSuccess() : 요청이 성공적으로 완료된 후에 호출됨
.ajaxError() : ajax 실행 후 에러 발생시 함수 실행 / $.ajax() 옵션의 error와 동일
.ajaxComplete() : ajax 실행 후 최종적으로 함수 실행 / $.ajax() 옵션의 complete 와 동일
$.ajaxPrefilter() <jQuery.ajaxPrefilter()> : ajax 요청을 보내기 전에 Ajax 옵션들을 수정하거나 조작한다.
$.ajaxPrefilter(function(options)){
// options : request 요청 옵션 값들
});
$.ajaxSetup() <jQuery.ajaxSetup()> : 앞으로 발생할 ajax 요청에 대한 디폴트 값을 설정한다.
$("button").click(function(){ // button을 클릭할시 ajax 호출에 대한
$.ajaxSetup({ // url과 success 함수를 셋팅한다.
url : "test_ajax.txt",
success:function(result){
})
});
$.get() <jQuery.get()> : get 방식으로 ajax 통신을 한다. 서버에서 가져온다.
$.get("test.php", function(data.status){..}); // "test.php"로 get 방식 통신 후 function 실행
$.getJSON() <jQuery.getJSON()> : $.get()과 동일하나, 데이터 타입은 json 타입이다.
$.getScript() <jQuery.getScript()> : $.get()과 동일하나, 데이터 타입은 script, 동적으로 자바스크립트를 불러온다.
$.post() <jQuery.post()> : post 방식으로 ajax 통신을 한다. 서버와 파라미터로 데이터를 주고받는다.
$.post("test.php", // "test.php"로
{ // name과 message 파라미터
name: "myeonghyeon",
message : "hi"
},
function(data.status){..} // callback() 함수 실행
); // "test.php"로 파라미터를 보내 post 방식 통신 후 function 실행
.promise() : 비동기함수(Ajax)가 리턴한 객체를 가진다.
.promise().done(); : 선택된 비동기함수 리턴 객체의 콜백이 성공, done 함수 실행
$("div").promise().done(function(){
$("p").append("Finished"); // 모든 div 요소의 요청이 모두 성공하면, done 실행, p 요소에 finished 삽입
});
.promise().fail(); : 선택된 비동기함수 리턴 객체의 콜백이 실패, fail 함수 실행
.promise().then(); : 콜백이 성공하면(success) 리턴데이터를 then의 인자가 받아서 실행
$("div").promise().then(A).then(B); // div에 주어진 액션이 성공하면 리턴값을 가지고 A 함수 실행 A함수 리턴값을 가지고 B 함수 실행
$.when() <jQuery.when()> : 인자의 함수의 콜백 후 리턴값을 반환한다.
$.when( effect() ).done(function(){
$("p").append("finished"); // effect() 함수를 실행해서 성공하면 p 에 finished를 삽입한다.
});
$.when( A, B ).done(function(){
// 동시에 A,B 함수를 실행하고 모두가 성공할 경우 .done(function() 실행
});
$.deferred() <jQuery.deferred()> : $.ajax가 반환하는 객체, pomise 객체와 같은 일을 할 수 있으며 추가적인 콜백 함수를 가진다.
deferred.always() : 요청이 성공, 실패에 무관하게 항상 실행된다.
deferred.done() : 요청이 성공시 실행된다.
deferred.fail() : 요청이 실패시 실행된다.
deferred.isRejected() : 요청이 실패됐는지 확인한다.
deferred.isResolved() : 요청이 성공했는지 확인한다.
deferred.pipe() : 요청의 return 값을 인자로 넘겨준다.
deferred.promise() : 요청의 콜백을 객체로 가지고 있는다.
deferred.reject() : 요청이 실패시 fail() 함수를 호출한다.
deferred.rejectWith()
deferred.resolve() : 요청이 성공시 done() 함수를 호출한다.
deferred.resolveWith()
deferred.then() : 두개의 인자를 가지고 두개 모두 성공할 때 resolve(), 하나라도 실패하면 reject() 실행
'차근차근 > JQuery Ajax Jstl' 카테고리의 다른 글
| json 데이터 받아서 탭에보여주기 (0) | 2017.07.06 |
|---|---|
| jquery table accordion (제이쿼리 테이블 아코디언) (4) | 2015.11.04 |
| ajax form 정리 (0) | 2015.01.19 |
| Ajax 오류 메시지 (0) | 2015.01.19 |
| jQuery Cycle Plugin - 이미지 슬라이드 (0) | 2014.12.24 |