• 참조
  • 블로그: https://velog.io/@rudwnd33/TIL-11월-27일
  • form to json: https://stackoverflow.com/questions/22195065/how-to-send-a-json-object-using-html-form-data
• 문제
  • 기존 Json 포맷을 ajax를 사용해 서버로 전송할 때는 Content-Type이 application/json으로 보내면 됐음
  • 하지만 파일을 추가해 Content-Type이 multipart/form-data인 경우 두가지 타입을 보낼 수 있는가?
• 해결 방식
  • FormData를 만들고 FormData 객체에 Json과 MultipartFile을 append하고 해당 FormData를 서버로 전송
  • 하지만, ajax로는 두가지 Content-Type에 대해 전송할 수 없음
  • 그래서 Blob을 사용해서 Content-Type을 지정해서 FormData에 추가하면 여러 Content-Type으로 보낼 수 있게 됨
  • data파라미터로 전달된 데이터는 jQuery 내부적으로 query String으로 만들게 되는데, 파일 전송의 경우에는 query String이 사용되지 않으므로 이를 설정하는 것이 processData: false
  • contentType은 default = ‘application/x-www-form-urlencoded; charset=UTF-8’인데 multipart/form-data로 전송 될 수 있게 false로 넣어줌
  • cache
    • IE 브라우저에서 ajax를 사용하면 데이터가 갱신되지 않고 이전 데이터 그래도 남아있는 경우 있음
    • 이는 IE 브라우저에서 ajax 통신을 할 때 url을 새로 호출하지 않고, 가지고 있는 캐시 값을 그래도 노출시키기 떄문
    • cache: false를 통해 해결 가능