javascript 04. jquery & ajax 기본 문법

2019.05.17 jquery & ajax 기본 문법

• 패스트캠퍼스 웹 프로그래밍 스쿨 수업 정리 내용

jquery & ajax 기본 문법

<script type = "text/javascript">
    $(function(){
        $('특정 테그').특정모션(function(e){
            e.preventDefault(); //일어날 행동을 일단 막고
            url = $(this).attr('href')
            data = #정의 할 데이터가 있을 때 정의
            $.ajax({
                url : url
                data : data #넘겨줄 데이터가 있을 때 적는다.
            }).done(funtion(data){
                ajax실행 뒤에 일어날 행동 정의(html 단에서)
    });
}};
</script>

• 특정한 테그 혹은 class혹은 id에 어떤 모션이 일어났을 때(click, submit 등)
• 원래 일어나는 행동을 막고
• 이후에 필요로 쓰게될 특정 데이터 혹은 url에 대해 정의 해준 다음에
• ajax를 실행시켜 ajax가 설정된 url을 통해 view를 실행시켜 해당 뷰가 db를 정리 한뒤에 필요한 것은 JsonResponse로 반환해주고 그 반환 값을 ajax에서는 받아와
• .done뒤에 일어날 행동들을 설정해서 html 단에서 일어나는 행동들을 정의시켜준다.

ajax 기본 연습하기 (간단한 데이터 삽입해보기)

python views.py 만들기

• 바꿔 끼울 데이터를 딕셔너리 형태로 입력해준다.
• 일반적인 경우 데이터를 전송하기 위해 json형태로 데이터를 보낸다.
• 따라서 jsonResponse를 활용한다.
• json은 딕셔너리 형태로 데이터를 전송한다.

from django.http import JsonResponse

def get_data_ajax(request):
    data = {
        "name":'jake',
        "age":100,
        "blood":"O",
    }
    return JsonResponse(data)

해당 url을 연결시켜준다.

path('ajax/get_data/', get_data_ajax, name='get_data_ajax')

템플릿에 데이터 들어갈 곳 및 버튼 추가하기

<div class = "data_area">
    데이터 입력될 곳
</div>

<a href="{ % url 'board:get_data_ajax' % }" class="btn_get_data btn btn-primary">데이터 가져오기</a>

템플릿에 jquery 추가하기

1. 먼저 url을 연결해준다.
2. 다음으로 버튼을 눌렀을 때 이동하지 않도록 한다.
3. 다음으로 데이터를 가지고 와야 한다.
4. base.html에 script아래 extra_script를 추가해준다.
   1. jquery 다운로드 사이트에 접속하여 jquery를 가지고 온다.
   3. base.html에 있는 slim jquery를 바꾸어 줘야 한다.
5. script type을 추가해준다.

{ % block extra_script % }
<script type="text/javascript">
    $(function(){
        $('.btn_get_data').click(function (e) {
            e.preventDefault(); //버튼이 클릭하면 이동못하게 기본 기능 취소
            alert('clicked'); //확인을 위해 알림창 띄우기
            url = $(this).attr('href');   //this는 이벤트 대상(btn_get_data)
            $.ajax({
                // ajax 호출시 사용할 매개변수
                url:url
            }).done(function(data){
                // 호출이 끝나면 받은 데이터를 처리하는 부분
                alert(data.name);
                // 새로운 데이터를 추가해주고 싶을 때

                name = data.name;
                age = data.age;
                bloodtype = data.bloodtype;
                html = "<ul><li>"+name+"</li><li>"+age+"</li><li>"+bloodtype+"</li></ul>"
                $('.data_area').html(html)
            });
        });
    });

</script>
{ % endblock % }

• 해당 동작이 일어날 페이지 아래에 위의 내용을 끼워넣는다. block extra_script의 경우 base.html에서 미리 지정해놓는다.
• 해석하기
  • .btn_get_data 클래스가 지정된 것을 찾아 만약에 클릭이 되면
  • 일단 일어날 일을 막고
  • clicked가 된 알람창을 띄어줘라
  • 그리고 이후에 사용하게 될 것들을 지정해주는데
  • url은 그 이벤트가 일어난 것에 연결된 링크를 연결해서 사용한다.
    • 아마 보통 어떤 형태가 일어나기 위해서는 링크가 연결되어야 하기 때문에 대부분 링크가 있을 것이다.
  • ajax를 실행하고
  • ajax가 실행될 때 url은 위에서 설정된 url을 바탕으로 URLSConf를 바탕으로 해당 views.py로 찾아가고
  • views.py에서 넣어놓은 data를 JsonResponse로 넘겨서 받아온다.
  • 그 받아온 데이터를 done(function(data)를 통해 가지고 오고
  • name와 age/ bloodtype에 넣어서 그 값들을 html 태그 속에 넣는다.
  • 그리고 지정된 class="data_area" 위치를 찾아가서 해당 html을 채워넣고 화면에 보여준다.