[django] ajax통신&jQuery를 이용한 데이터 실시간으로 불러오기

ajax를 이용한 데이터 실시간으로 불러오기

프로젝트를 구현하는 과정에서 ajax를 사용해서 mysql db에 있는 데이터를 웹에 실시간으로 표시해야할 일이 생겼다.

일단 대충 흐름도는 다음과 같다.

1. shadow chaser는 메인 템플릿으로, 사용자에게 인스타 아이디를 입력받는다.

2. 검색 버튼 클릭시 매핑된 url을 통해 views.py의 searching 함수로 인스타 아이디가 전달된다.

3. searching함수는 database와 (searching.html)로 instaid를 건내준다.

4. report 템플릿은 views.py의 searching_data함수와 ajax통신을 사용해서 실시간으로 데이터를 사용자에게 보여준다.

 

 

urls.py

from django.urls import path from . import views app_name = 'scfront' urlpatterns = [     path('', views.index, name='index'),     path('searching/', views.searching, name='searching'),     path('searching/data', views.searching_data, name='searching_data'), ]

searching 함수와 searching_data함수에 대한 url을 매핑한다.

 

views.py/searching

def searching(request):     if request.method == 'POST':         instaId = request.POST.get('instaId', False)         conn = pymysql.connect(             user='username',             passwd='password',             host='host ip',             db='database name',             charset='utf8'         )         query = "INSERT INTO scfront_input_profile(input_id,used,total_img) VALUES('{}',{},{})".format(instaId, 0, 0)         curs = conn.cursor()         curs.execute(query)         conn.commit()         conn.close()         context = {             'instaId': instaId,         }         return render(request, 'scfront/searching.html' ,context)     else:         return redirect('scfront:index')

views.py 의 searching 함수에서는 메인 템플릿에서 사용자로부터 입력받은 인스타 아이디를 post방식으로 전달받았다.

이것을 mysql 에 넣어주고, searching 템플릿에 전달한다.

 

views.py/searching_data

def searching_data(request):     #데이터 모델로 부터 추출     hashtag_list = Danger_Hashtag.objects.values_list('tag','count').order_by('-count')     hashtag_count = hashtag_list.count()     profile_count = Danger_Profile.objects.count()     top6_hashtag = list(hashtag_list[0:6])     instaId = request.POST.get('instaId', None)     similar_list = Similar_Profile.objects.filter(origin_id=instaId)     similar_count = similar_list.count()     context = {         'instaId': instaId,     'similar_count': similar_count,     'hashtag_count': hashtag_count,     'profile_count': profile_count,     'top6_hashtag': top6_hashtag     }     return HttpResponse(json.dumps(context, ensure_ascii=False),content_type=u"application/json; charset=utf-8")

views.py 의 searching_data 함수에서는 searching 템플릿으로부터 ajax 통신을 통해 instaid와 csrf token을 전달받았다.

mysql의 모델을 참조하여, 입력된 인스타 아이디와 유사한 인스타 아이디, 해시태그 정보를 템플릿에 json 형태로 다시 돌려준다. 

searching.html의 스크립트 코드가 3초마다 한번씩 실행하여, searching_data에게 데이터를 요청하기때문에 실시간으로

데이터가 반영된다. 즉 대시보드처럼 비동기식으로 데이터를 웹에 표현할 수 있게 된다.

 

 

template/searching.html

<div class="resultbox">                 <div id=hashtag1 class="scf"></div>                 <h3 id=hashcount1 class="scf" ></h3>                 <br>                 <div id=hashtag2 class="scf"></div>                 <h3 id=hashcount2 class="scf" ></h3>                 <br>                 <div id=hashtag3 class="scf"></div>                 <h3 id=hashcount3 class="scf" ></h3>                 <br>                 <div id=hashtag4 class="scf"></div>                 <h3 id=hashcount4 class="scf" ></h3>                 <br>                 <div id=hashtag5 class="scf"></div>                 <h3 id=hashcount5 class="scf" ></h3>                 <br>                 <div id=hashtag6 class="scf"></div>                 <h3 id=hashcount6 class="scf" ></h3>                 <br>             </div> <!--        생략 .... --> <script type="text/javascript"> $(document).ready(function requestData(){     var instaId = $("instaId").attr('name')     $.ajax({         type: "post",         url : '{% url 'scfront:searching_data' %}',         data: {         'csrfmiddlewaretoken': '{{ csrf_token }}',         'instaId': '{{ instaId }}',         },         datatype:'json',         success: function(data){             var allcount = data['hashtag_count'];             var top6_tag = data['top6_hashtag'];             var profilecount = data['profile_count'];             var similarcount = data['similar_count'];             $("#allcount").html(allcount);             $("#profilecount").html(profilecount);             $("#similarcount").html(similarcount);             $("#hashtag1").html(top6_tag[0][0]);             $("#hashcount1").html(top6_tag[0][1]);             $("#hashtag2").html(top6_tag[1][0]);             $("#hashcount2").html(top6_tag[1][1]);             $("#hashtag3").html(top6_tag[2][0]);             $("#hashcount3").html(top6_tag[2][1]);             $("#hashtag4").html(top6_tag[3][0]);             $("#hashcount4").html(top6_tag[3][1]);             $("#hashtag5").html(top6_tag[4][0]);             $("#hashcount5").html(top6_tag[4][1]);             $("#hashtag6").html(top6_tag[5][0]);             $("#hashcount6").html(top6_tag[5][1]);             setTimeout(requestData, 3000);         },         error: function(request, status, error){             alert('ajax 통신실패');             alert(error);         }    }) }); </script>

searching 템플릿에서, views.py에 data를 3초마다 요청하고 받아온 데이터를 jquery를 통해 각 태그 값으로 넣어준다.

 

결과

아이유님의 인스타 계정인 dlwlrma 과 유사한 아이디를 쓰는 인스타 계정을 찾는 코드를 돌렸을 때, 실시간으로 데이터가 증가하는 모습과 다른 db에서 불러온 정보들도 실시간으로 데이터가 갱신되는 것을 확인할 수 있었다.

 

 

+

비슷한 문제를 해결하려고 포스트를 보시게 된다면, 코드를 참조한다기보다 방법을 참고하면 좋을거같습니다.