[JavaScript] 자바스크립트 ajax로 html / multipart 사용하기

자바스크립트에서 현재 페이지에서 페이지 이동없이 데이터를 불러오는 방법으로 ajax를 사용하는데,

ajax를 사용하여 데이터를 가져오는 방법 중에 html을 가져오는 방법과 파일을 서버로 전송하는 방법에 대해 알아보자.

---

# html : html 파일 데이터 가져오기 (서버에서 html 파일을 ModelAndView로 내려줘야 한다.)

    1. ajax 함수 선언

var AjaxComm = ({
    ajaxAsyncHtml : function(url, data, success, fail){

        $.ajax({
            dataType : "html",
            url : url,
            type : "POST",
            data : data,
            success : function(data){
                if(success){
                    success(data);
                }
            },
            error : function(xhr, status, error){
                //alert("code : " + xhr.status + "\n message : " + xhr.responseText + "\n error : " + error);
                if(fail){
                    fail(error);
                }else{
                    alert(error);
                }
            }
        });

    }
});

 

    2. ajax 함수 호출하기

AjaxComm.ajaxAsyncHtml('${targetUrl}', '${data}',
    function(result){
    	alert('success');
        $('#targetHtml').html(result);
    },
    function(result){
    	alert('fail');
    }
);

---

# multipart : multipart로 서버에 파일 보내기

    1. ajax 함수 선언

var AjaxComm = ({
    ajaxAsyncMultipart : function(url, data, success, fail){

        $.ajax({
            url : url,
            enctype : 'multipart/form-data',
            processData : false,
            contentType : false,
            dataType : "json",
            type : "POST",
            data : data,
            success : function(data){
                if(success){
                    success(data);
                }
            },
            error : function(xhr, status, error){
                //alert("code : " + xhr.status + "\n message : " + xhr.responseText + "\n error : " + error);
                if(fail){
                    fail(error);
                }else{
                    alert(error);
                }
            }
        });

    }
});

 

    2. ajax 함수 호출하기

AjaxComm.ajaxAsyncMultipart('${targetUrl}', '${data}',
    function(result){
    	alert('success');
    },
    function(result){
    	alert('fail');
    }
);

 

    3. 서버에서 multipart로 파일을 받을때는 MultipartHttpServletRequest로 받으면 된다.