[JavaScript] Ajax를 이용해 FormData를 flask로 보내는 방법

Target

웹에 있는 form 정보를 자바스크립트 Ajax를 이용해서 flask로 보내기

Javascript

var form = document.querySelector('form');

form.addEventListener('change', e => {
    var data = new FormData(form);
    for (var [key, value] of data) {
    console.log(key, value);
    }

    $.ajax({
        type : 'POST',
        url : '/get_form',
        data: data,
        contentType : false,
        processData : false
        });
});

FormData

• FormData 인터페이스는 form 필드와 그 값을 나타내는 일련의 key/value 쌍을 쉽게 생성할 수 있는 방법을 제공함

웹에서 'form' 에 해당하는 요소를 form 이라는 변수에 저장을 해줌

• addEventListener : 특정 이벤트가 발생했을때 특정 함수를 실행시킴
• change : 변동이 생기면 다음을 실행
• e : eventObject

➡️ 즉, form에 변화가 생기면 다음의 이벤트를 실행시켜라

이때 실행되는 이벤트

• data라는 변수에 FormData 지정
• 확인해보기 위해 for (var [key, value] of data) {console.log(key, value);} 로 프린트 해봄. 잘 나옴
• Ajax

 

Ajax

Ajax는 자바스크립트 라이브러리 중 하나임

클라이언트가 요청을 하면 서버가 reload를 해서 응답을 했었는데 Ajax를 사용하면 reload 없이 응답할 수 있음

➡️ 즉, 페이지를 전환하고 싶지 않아서!

• data 에 담겨진 내용을 POST 방식으로 전송
• url : 이 주소로 전송
• data: 보내고 싶은 data
• contentType : false contentType의 기본값은 application/x-www-form-urlencoded 이다.
  • application/x-www-form-urlencoded 는 데이터가 key=value&key=value 의 형태로 전달되는 HTML form의 기본 Content-Type이다. 대부분 사용되는 application/json 타입은 {key: value} 형식으로 데이터를 전달한다.
  • contentType 은 dataType 과는 다르다. contentType 우리가 보내는 데이터의 타입이고, dataType 은 서버에서 받을 데이터 타입이다.
• processData : false processData의 기본값은 query string이다. false 값을 하면, jQuery processing을 중단한다. 즉, processData 가 false 이면, query string으로 변환하려는 시도 없이, 우리가 Ajax에 명시한 값을 전송한다.

 

Flask

Flask에서 data 받는 방법

@app.route('/get_form', methods=['POST', 'GET'])
def get_form_from_js():
    if request.method == 'POST':
        form = request.form
        form = form.to_dict(flat=False)
        return form

/get_form 이라는 url 주소에서 받음.

request.method 가 POST 이면 form에 request.form 을 저장함

이때 프린트해보면 잘 프린트 됨.

나의 경우 form 에 ImmutableMultiDict 타입이 저장되었다. 보통 dictionary 와는 다르게 같은 key 값을 가진 여러개의 value가 존재한다. 나는 이 multidict 를 보통의 dictionary 로 바꿔 같은 key 값이면 하나의 key에 여러개의 value를 리스트로 저장하고 싶다.

이럴때는 .to_dict(flat=False) 사용

 

 

 

---

배움을 기록하기 위한 공간입니다. 

수정이 필요한 내용이나 공유하고 싶은 것이 있다면 언제든 댓글로 남겨주시면 환영입니다 :D