$.ajax .done .fail ajax .done .fail 사용시 response data 가져오기

 

$.ajax 호출시 success, error 혹은 done, fail 을 사용하여 서버 통신 결과를 콜백 처리 할 수 있다.

 

그 중 done, fail 을 사용시 어떤 값들을 뽑아 낼 수 있는지 알아보았다.

jQuery document 를 읽어보니 아래와 같은 부분을 찾을 수 있었다.

.done 의 경우 순서대로 data, textStatus, jqXHR 을 리턴해주고 있었다.

 

 

[Example]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
var httpFileUpload = {
    
    getAddr : function(fileElement, callback){
        
        const file = fileElement[0];
        if(!file){
            throw new Error("file Element is required");
        } else {    
            const uploadFile = file.files[0];
            
            if(!uploadFile || !uploadFile.size || !uploadFile.name || uploadFile.size === 0){
                throw new Error("upload file is required");
            } else {
                console.log("file size : " + uploadFile.size+"\nfile name : " + uploadFile.name);
                 
                var params = {
                        filename : uploadFile.name,
                        filesize : uploadFile.size,
                        provider : "TEST"
                    };
                
                $.ajax({
                    type    : "POST",
                    url        : "/sample.do",
                    contentType: "application/json",
                    dataType:"json",
                    data     : JSON.stringify(params)    
                })
                .done(function (data, textStatus, xhr) {
                    console.log(xhr);
                    if(data.result_cd == "1"){
                        alert("success!");
                    } else {
                        alert("에러발생["+data.result_cd+"]");
                        console.log(data.result_msg);
                        callback(data);
                    }
                })
                .fail(function(data, textStatus, errorThrown){
                    console.log("fail in get addr");
                    callback(data);
                });
            }
        }
    }
}
cs

30 번 라인에서 xhr 을 console log 로 찍어보았다.

(console.log 는 브라우저의 개발자도구(크롬기준 F12) -> console 탭에서 확인이 가능하다)

위와 같은 데이터들이 xhr 내에 담겨있음을 확인 할 수 있다.

 

그렇다면 http Status code 를 기준으로 분기처리를 하고 싶다면 어떻게 해야할까?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//생략
.done(function (data, textStatus, xhr) {
    //alert("data : " + data + "\nstatus : " +status +  "\nxhr" + xhr.status);
    switch(xhr.status){
        case 201:
            cp_funcs.alert('uploaded!');
            callback(data);
            break;
        case 404:
            cp_funcs.close();
            cp_funcs.alert('not found');
            callback(data);
            break;
        default:
            cp_funcs.close();
            cp_funcs.alert('Error');
            callback(data);
            break;
    }
});
//생략
cs

위(4~18 line)처럼 xhr내의 status를 뽑아 내면 된다.

반응형

+ Recent posts