[제이쿼리] AJAX에서 serialize와 data 전송의 차이 + FormData

ajax를 통해 비동기로 데이터를 주고 받고 있는데 Form을 url에 붙여서 보내는 것과 data에서 json으로 보내는 방법의 차이를 알아봤다.

내가 알고 있는 Post의 데이터 전송 방법은 FormData로 묶어서 보내기, url에 $().serialize로 보내기, data에 직접 넣어주기였다. 하지만 실제 코드를 쓰면서 url에 직접 보내게 되면 어떤 값이 백엔드로 가는지, data로 직접 넣어주면 어떻게 가는지 궁금해졌다.

url + serialize

$.ajax({
	url : 'jung.com?' + $(#jung).serialize(),
    type : 'post'
})

이렇게 url에 form데이터를 바로 serialize해서 보내게 되면 직렬화가 되어 자동으로 쿼리스트링되어 전달이 된다.

jung.com?key1=value1&key2=value2 이런식으로 값이 보내지게 된다.

하지만 데이터 길이에 제약이 있고, url에 값을 담고 있기 때문에 데이터가 쉽게 노출이 되어 보안에 취약하다. 그래서 GET방식에서 많이 사용한다.

data{}

$.ajax({
	url : 'jung.com?' + $(#jung).serialize(),
    dataType : 'json',
    type : 'post',
    data : {
    			key1 : value1,
                key2 : value2
                
    		}
})

data에 json으로 데이터를 주고 받는 방식은 이름과 값으로 구성되어 있고, 가장 많이 쓰이는 방법이다. 여기서 중요한 것은 form 자체를 바로 넣는 것이 아니라 들어가야 할 값들을 꼭 정리해서 넣어야하고, dataType도 json으로 알려줘야 한다.

Formdata

Formdata는 form 필드와 값을 나타내는 key와 value를 쉽게 생성할 수 있는 인터페이스이다. ajax에서는 이미지를 업로드할 때 주로 사용한다.

• FormData.append(name, value)
  formData 객체 안에 이미 키가 존재하면 그 키에 추가, 키가 없으면 추가
• FormData.delete(name)
  삭제
• FormData.get(name)
  주어진 키와 연관된 첫번째 값을 반환

const formData = new FormData();
formData.append('file', file);

$.ajax({
	url : 'jung.com?' + $(#jung).serialize(),
    
    enctype: 'multipart/form-data',
    processData: false,
    contentType: false,
    dataType : 'json',
    type : 'post',
    data : formData
})

여기서 일반적은 데이터 전송과 다른 점이 있다.

- enctype: 'multipart/form-data' + contentType: false
만약 타입을 멀티파트로 정해주지 않으면 application/x-www-form-urlencoded 으로 전송이 된다. 파라미터로 전송이 되기 때문에 꼭 파일 처리를 해줘야한다. 또 contentType도 기본값이 application/x-www-form-urlencoded 이므로 false로 명시해줘야한다.

- processData: false
processData는 Jquery 내부적으로 쿼리 스트링을 만들어 data 파라미터를 전송하는 것이다. 예를 들면 key1=value1&key2=value2 이런식으로 보내지는건데 이걸 false로 하는 것이다.

비동기 데이터 전송 방식은 자주 사용하므로 이번기회에 제대로 알아둬야겠다. 끝