Django 7일차 (Ajax,Loading)

URL을 검색하는 페이지에 검색을 할 떄

우리 프로젝트의 특성 상 기계학습을 해야해 시간이 조금 걸린다.

이에 로딩이 되고 있는 것을 페이지를 변환하지 않고 보여주고 싶어서

Ajax를 사용해보기로 했다.

 

Ajax 

Ajax를 처음 사용해봐서 자료 찾고 이해하느라 시간이 조금 걸렸다.

이해를 대충해보니 편리하다고 효율적이라는 것을 깨달았다. 우선 완성된 페이지를 보자.

 

 

 

 

검색 전 페이지

 

 

 

검색 후 로딩 화면

 

 

 

로딩 후 화면

 

 

 

이제 코드를 보면서 이해를 해보자

 

 

views.py

class search_VIEW(View):
    def get(self, request):
        return render(request, 'user/search.html')


def test2(request):
    entry_url = request.GET['url_catch']
    time.sleep(2)
    if entry_url:
        try:
            queryset = Board2.objects.get(url=entry_url)
        except ObjectDoesNotExist:
            queryset = False
        if(queryset):
            queryset.hits = queryset.hits+1
            queryset.save()
            return render(request, 'user/name.html', {'url': '%s' % entry_url, 'check': 'Exist on DB. It is Phishing site!!!'})
        else:
            fb = Board2(url=entry_url, date=datetime.now(), memo='tmp', hits=1)
            fb.save()
            return render(request, 'user/name.html', {'url': '%s' % entry_url, 'check': 'does not Exist on DB. register new data...'})
    context = {'url': 'url을 입력하세요'}
    return render(request, 'user/name.html', context)

 

원래의 페이지인 search_VIEW 코드가 굉장히 짧아졌다.

기존에 버튼을 통해 값을 받을 때 post 방식을 사용하였는데

Ajax를 사용하면 post 방식이 의미가 없어진다.

 

다음은 test2를 보자. ajax 내부에서 실행될 함수인데 search_VIEW에 

들어있던 코드들의 대부분이 이로 옮겨졌다.

처음에 ajax에서 request로 url_catch를 받아온다.

time.sleep(2)는 로딩 화면을 보기위해 임시로 넣어놨다.

대회때는 아마 저 자리에 피싱 사이트 여부를 판단해주는 기계학습 코드가 들어갈 것이다.

그 후의 코드는 별 차이가 없다. 

 

template

 

<div id="result">
  <h3>검색 url: {{url}}</h3>
  <h3>결과: {{check}}</h3>
</div>

위의 코드는 ajax에서 append할 코드이다.

기존의 페이지에서 데이터를 받아 여기에 넣어 append 시킨다.

 

{% extends "user/base.html" %} {% block content %}

<h1>Trillion Guard</h1>
피싱사이트 검색해주세요~
<form action="./" method="post">
  의심 URL: <input id="search_input" type="text" name="url_id" />
  {% csrf_token %}
  <input id="btn" type="button" value="검색" />
</form>

<div id="wrap-loading" style="z-index: 10000; display:none">
</br>
  <h1 style="display: inline;">Loading...</h1>
  <img src="/static/image/loading.gif" alt="Loading..." />
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $("#btn").click(function () {
      $.ajax({
        url: "/user/name/",
        data: { url_catch: $("#search_input").val() },
        success: function (data) {
          $("body").append(data);
        },
        beforeSend: function () {
          $("#result").remove();
          $("#wrap-loading").show();
        },
        complete: function () {
          $("#wrap-loading").hide();
        },
      });
    });
  });
</script>

{% endblock %}

위 코드는 기존의 페이지인데 script 20 중 정도가 추가 됐다.

ajax 내부를 보면 크게 success,beforesend,complete가 있다.

이름만 봐도 알 수 있는데 success는 성공했을때인데 내부의 코드를 보면 body에 data를 append한다고 만들었다.

이때 data는 위에 있는데 url_catch를 text input에서 가져와 /user/name으로 전달한 값이다.

이거를 가져와 body에 추가한다.

 

beforesend의 경우 위의 success가 실행되는 동안 보여주는 것인데

처음에는 id가 result인 것을 remove하는데 이를 없애면 버튼을 계속 누르면 무한정으로 

data를 추가하게 된다. 이를 방지하기 위해 해당 코드를 추가했다.

이때 wrap-loading을 show한다. 위를 보면 id가 wrap-loading인 div가 있는데 style을 보면

display:none으로 되있다. 이거를 보여준다는 것이다. 

 

그 후 complete은 말 그대로 ajax의 동작이 수행된 후인데

다시 wrap-loading을 hide하여 동작을 마친다.