[Django] Ajax serialize를 사용하여 form 데이터 전송하기

ajax를 사용하여 재로딩 없이 폼을 전송하는 기능을 구현하기 위해 serialize를 사용하며 오류로 고생하여 간단히 포스팅합니다. 중요한 부분만 간략히 정리해왔으니 감안하고 참고해주세요!

 

 

Html 코드

<form method="post" id="js-addressForm">
  {% csrf_token %}
  <input type="hidden" name="post_type" value="edit_address">
  <input type="text" name="delivery_name" placeholder="배송지명" maxlength=10>
</form>

...

<div id="js-editAddress">배송지 저장</div>

저는 form 태그 밖에 버튼이 위치해 있어서 submit이 아니라 click 메소드 내에 코드를 구현했습니다. 만약 form 태그 안에 <button type=submit> 방식으로 구현하시는 분들은 js에서 click 메소드 구현이 아니라 submit 메소드를 직접 구현해주시면 될 것 같네요.

 

여기서 주의할 점 : serialize는 input 태그의 name을 기반으로 {key: value} 형태로 변환해주기 때문에 name이 필수입니다.

 

 

JS 코드 (jquery)

function ajax_address_post(post_data, post_url){
  var csrftoken = $("[name=csrfmiddlewaretoken]").val();

  $.ajaxSetup({
    beforeSend: function(xhr, settings) {
      if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
        xhr.setRequestHeader("X-CSRFToken", csrftoken);
      }
    }
  });

  $.ajax({
    type: "POST",
    url: '/user/address/',
    data: post_data,
    success: function(ajax_data) {}
  });
}

$(document).ready(function (){
  $("#js-editAddress").click(function () {
    ajax_address_post($("#js-addressForm").serialize());
  });
});

저는 ajax를 여러번 호출하기 때문에 별도 함수로 구분했는데 클릭 메소드 내에서  $.ajax({}) 부분 구현해주셔도 됩니다. 여기서 포인트는 아까 만들었던 form 태그의 아이디로 $("아이디").serialize()를 data로 넘겨주시는 거에요.

 

이렇게 구현해서 장고 뷰에서 request.POST를 print해봐도 <QueryDict: {}>가 출력되어서 이 에러를 고쳐보려고 이것저것 다 도전해보다 찾은 오류는 바로 form 태그의 중첩이었습니다.

serialize를 form태그를 id로 찾는데 form 태그 내부에 또 form 태그가 있으면 id를 못찾아서 serialize할 대상을 못찾는 문제였습니다.

 

주의할 점 : form 태그를 중첩해서 사용하면 id를 찾지 못하여 serialize가 되지 않는다. 

 

 

View 코드

def change_address_view(request):
  if request.method == 'POST':
    post_type = request.POST.get('post_type')
    if post_type == 'edit_address':
      delivery_name = request.POST.get('delivery_name')

  return JsonResponse({})

이제 아까 ajax에서 요청한 url로 연결되어 있는 view에서 request.POST.get('name'을 통해 값을 가져올 수 있습니다.

 

 

같은 오류로 고생하시는 분이 없길 바랍니다~