Form 형식으로 submit 하던 코드를 비동기 방식으로 송신하고 response의 결과값에 따라 처리해야 할 일이 생겼다. 더 이상 jquery를 사용하여 legacy 코드를 수정하고 싶지 않지만.. 일이 생기면 할 수 밖에 없다. 덕분에 FormData를 사용해볼 수 있었다.
여러가지 우여곡절이 있었다.
처음에는 ajaxForm 플러그인을 사용하여 간단하게 끝내고 싶었으나, 레거시 코드의 Jquery가 어떻게 꼬였는지 작동하지 않아,
방법을 바꿔 FormData를 사용했다.
<참고>
- https://hellogk.tistory.com/28
- https://stackoverflow.com/questions/26922500/formdata-empty-when-constructing-with-element
- https://stackoverflow.com/questions/12755945/jquery-and-html-formdata-returns-uncaught-typeerror-illegal-invocation
function ajaxFormData (dataSet, successFn) {
$.ajax({
type: "POST",
url: window.location.href,
data: dataSet,
contentType: false,
processData: false,
success: function(reponse){
if(reponse.result==='success'){
successFn()
}
},error: function(xhr, status){
alert(xhr + ":" + status);
}
});
}
function temp_save() {
var form = $('form[name=frm_content]')[0];
var formData = new FormData(form)
console.log(formData);
for (var pair of formData.entries()) {
console.log(pair[0]+ ', ' + pair[1]);
}
ajaxFormData(formData, function(){
alert('임시 저장이 완료되었습니다.');
window.location.reload();
})
}FormData {}
// 이 부분 때문에 고생을 했다.
// `var formData = new FormData(form)` 의 결과를 콘솔에 찍어보고, 계속 빈 값이라고 생각했다.
// 찾아보니, FormData is created only for sending keyed data, not fot retrieving it
// FormData는 콘솔에 찍으면 본래 저렇게 빈 값처럼 보인다.
// FormData에 담긴 값을 확인해보고 싶으면 `entries()`를 활용하여 뽑을 수 있다.
csrfmiddlewaretoken, 6hbeoz1ebVM869TPrcoV7HzzwPjR72gBJLlbLGveWmBhEVru1vfkwZrsb1LQSUyL
state, temp
wish_company, 기타
teacher_question_46, please god help me
resume_file, [object File]