😆 개요

django로 웹 서비스를 만들어 보면서 비동기 방식을 안 써볼 수가 없다. 그!래!서! 비동기 통신 방식으로 많이 이용하고 있는 jquery의 ajax의 정말 기초적이 사용방법을 알아보려고 한다. 혹시라도 도움이 되는 분들이 있을까봐 포스팅하게 되었다.
(사실 내가 모르고 있어서 안 까먹으려고..)

시작하기 앞서, ajax가 뭘까?라는 생각이 먼저 든다.

Ajax(Asynchornous Javascript And XML)란?

AJAX란, JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.

즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다.

😎 Vㅔ리 간단한 사용법.

너무 쉬우므로 묻고 코드로 간다.

1️⃣ html 부분

<!-- head 부분 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- body 부분 -->
<script type="text/javascript">
$('#submit').on('click', function(e) {
    data = $('#text').val();
    $.ajax({
        type:'POST',
        url:'127.0.0.1:8000/home',
        data:JSON.stringify(data),
        success:function(json){
            console.log("data pass success",json);
        },
        error : function(xhr,errmsg,err) {
        console.log(xhr.status + ": " + xhr.responseText); 
        }
   });
  });


</script>

ajax 부분을 원하는 이벤트 function(위 예제에선 submit click시)안에 넣어주면 된다. 중간중간 나오는 $는 jquery 문법이다.

➕ jquery란?

• 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리다.
• 간단하게 웹페이지 상에서 $ 를 사용해서 Element를 쉽게 찾고 조작할 수 있다.
  • $('#foo') = id가 foo 인 Element
  • $('.foo') = class가 foo 인 Element

➕ data:JSON.stringify(data) 에서 JSON.stringify를 사용하는 이유

• 요청을 받는 views.py에서 json 파싱을 수월하게 하기 위해 str형태로 만들어서 보냄.

2️⃣ 요청을 받는 views.py 부분

from django.http import JsonResponse

def home(request):
    # POST 요청일 때
    if request.method == 'POST':
        data = json.loads(request.body)
        # do something
        print(data)

        context = {
            'result': data,
        }
        return JsonResponse(context)

home function에서 받은 데이터를 json.loads로 dic로 만들어서 사용할 수 있다. 그렇게 받은 데이터를 요리조리 조리하고, 다시 결과값을 dict형태로 만들어서 JsonResponse를 이용해서 전달한다.

➕ flask 쓸 때처럼 그냥 return json.dumps(context)를 해서 보내면 아래와 같은 에러가 뜬다..

AttributeError: 'str' object has no attribute 'get'
[20/Mar/2021 11:36:08] "POST /home HTTP/1.1" 500 60851

🤗 마무리

아주 기초적인 부분인데 이런 것에 막혀서 시간을 뻈겼던, 쉬운 방법이 있었는데 어렵게 하던 내 자신이 부끄럽긴 하지만… 그래도 이런 기회를 통해 알게 됐다!! 안까먹기 위해서 포스팅을 많이많이 해두자..😢

reference

• https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80