Ajax 통신하기

새로고침(Reload) 없이 통신하기 위해서 비동기 통신 방식인 Ajax를 활용할 수 있다.

jquery를 가져오고 script를 통해 손쉽게 사용 가능하다.

<script type="text/javascript">
        $("#room_check").click(function(){
            var room_type = $('#room_type').val();
            var room_date = $('#datepicker').val();
            var room_start_time = $('#room_start_time').val();
            var room_finish_time= $('#room_finish_time').val();

            $.ajax({ // ajax로 서버와 통신하겠다.
                type: "POST", // 데이터를 전송하는 방법을 지정
                url: "{% url 'check' %}", // 통신할 url을 지정
                data: {'room_type': room_type, 'room_date': room_date, 'room_start_time':room_start_time, 'room_finish_time':room_finish_time, 'csrfmiddlewaretoken': '{{ csrf_token }}'}, // 서버로 데이터 전송시 옵션
                dataType: "json", // 서버측에서 전송한 데이터를 어떤 형식의 데이터로서 해석할 것인가를 지정, 없으면 알아서 판단
                // 서버측에서 전송한 Response 데이터 형식 (json)
                // {'likes_count': post.like_count, 'message': message }
                success: function(response){ // 통신 성공시 - 동적으로 좋아요 갯수 변경, 유저 목록 변경
                    // 성공 시
                    if(response.check_error == 0){
                        var result = confirm("예약하시겠습니까?");
                        if(result){
                            $('#new_form').submit(); // 제출
                        }
                    }
                    // 실패
                    else{
                        alert(response.message);
                    }
                },
                error: function(request, status, error){ // 통신 실패시 - 로그인 페이지 리다이렉트
                    alert("입력값을 다시 한번 확인 부탁드립니다");
                },
            });
        })
    </script>

views.py

from django.http import HttpResponse
import json
...

# ajax 통신
def check(request):
    room_type = request.POST.get('room_type', None)
    room_date = request.POST.get('room_date', None) # ajax 통신을 통해서 template에서 POST방식으로 전달
    
    message= "통신 성공"
    print(room_type)
    print(room_date)
    context = { 'message': message,
                'room_type': room_type,
                'room_date': room_date
    }
    return HttpResponse(json.dumps(context), content_type="application/json")

urls.py

urlpatterns = [
    ...
    path('reservation/check', reservation.views.check, name="check"),
    ...
]