개요

현재 Django-rest-framework를 이용하여 회원 전용 게시판을 구현하고 있다. 게시물을 작성하고 제출하기 버튼을 클릭하면 일반적으로 폼이 제출되면서 다음 페이지로 이동하게 된다. 그러나 지금은 프론트엔드와 백엔드 부분이 분리되어져 있어 다음 페이지로 이동할 수 있게끔 URL을 지정할 수가 없다. 그래서 자바스크립트를 이용하여 제출하기 버튼을 클릭하였을 때, 폼내의 데이터를 FormData() 객체로 변환시켜 Ajax 비동기통신으로 전송하기 위함이다.
백엔드는 Restful API로 되어있다. 반환 되는 값은 처리 결과에 대한 JSON이다.

JS 코드

var form = $('폼 이름')[0];
var formData = new FormData(form);
$.ajax({
	type:"post",
	enctype:'multipart/form-data',
    url:'API 주소',
    data:formData,
    dataType:'json',
    processData:false,
    contentType:false,
    cache:false,
    success:function(data){
    	console.log("success : ", data);
    },
    error:function(e){
        console.log("error : ", e);
    }
});

위와 같이 구성하여 전송하면 input, textarea, files 들을 폼에 한꺼번에 넣어서 데이터를 전송할 수 있다.