AJAX

What is AJAX?

Asynchronous JavaScript And Xml
- 비동기 요청을 보낸다

AJAX 요청

: XHR을 보낸다

XMLHttpREquest (XHR)

Use XMLHttpRequest (XHR) objects to interact with servers.
You can retrieve data from a URL without having to do a full page refresh.
This enables a Web page to update just part of a page without disrupting what the user is doing.
XMLHttpRequest is used heavily in AJAX programming.

Django API: Ping-Pong 만들기

가상 환경 만들기

python -m venv venv

해당 프로젝트에서 pip list 찾게 하기

source venv/bin/activate

가상 환경 안에 pip 설치

(venv) 
chloe@chloe-XPS-15-9570 ~/Workspace/VanillaJS/live/AJAX
$ pip -m pip install --upgrade pip

가상 환경 안에 django 설치

(venv) 
chloe@chloe-XPS-15-9570 ~/Workspace/VanillaJS/live/AJAX
$ pip install django==2.1.15

`art` package 사용하기

installation

pip install art

`ping.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>아-트</title>
</head>
<body>
    <label for="userInput">Input: </label>
    <input id="userInput" name="inputText" type="text">
    <pre id="resultArea">

    </pre>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // 1. input#userInput 의 'change' 이벤트 때, value값을 '/art/pong' 으로 보낸다
        const userInput = document.querySelector('#userInput')
        userInput.addEventListener('input', function(event){
            // input type="text"는 focus out === enter
            const inputText = userInput.value
            // 2. pong이 받아서 다시 JSON으로 응답을 보낸다
            axios.get('/arts/pong/', {
                params: {
                    inputText: inputText,
                }
            })
                .then(function(res){ 
                 // 3. 응답 JSON의 내용을 div#resultArea에 표시한다
                    const resultArea = document.querySelector('#resultArea')
                    resultArea.innerText = res.data.content
        })
    })
    </script>
    
</body>
</html>

`views.py`

from django.shortcuts import render
from django.http import JsonResponse

import art 

# Create your views here.
def ping(request):
    return render(request, 'arts/ping.html')

def pong(request):
    user_input = request.GET.get('inputText')
    art_text = art.text2art(user_input)
    data = {
        'success': True,
        'content': art_text,
    }
    return JsonResponse(data)

좋아요 AJAX로 구현하기

AJAX (browser가 보내는 HTTP Request)를 통해 data 조작 URL에 요청 (Django app) 을 보내서
받은 응답의 data를 바탕으로, 하트만 HTML 속성 변경

`index.html`


<div data-gb-custom-block data-tag="extends" data-0='base.html'></div>

<div data-gb-custom-block data-tag="block">

  <h2>INDEX</h2>
  

<div data-gb-custom-block data-tag="for">

    <h3>작성자: {{ article.user }}</h3>
    <h4>제목: {{ article.title }}</h4>
    <p>내용: {{ article.content }}</p>
    <span>AJAX 방식</span>

      

<div data-gb-custom-block data-tag="if">

        <i class="fas fa-heart fa-lg likeButtons" style="color:crimson" data-id="{{article.pk}}"></i>
      

<div data-gb-custom-block data-tag="else"></div>

      <i class="fas fa-heart fa-lg likeButtons" style="color:black" data-id="{{article.pk}}"></i>
      

</div>

      
    <span>기존 방식</span>
    <a href="

<div data-gb-custom-block data-tag="url" data-0='articles:like'></div>">
      <div data-gb-custom-block data-tag="if">

        <i class="fas fa-heart fa-lg" style="color:crimson"></i>
      

<div data-gb-custom-block data-tag="else"></div>

        <i class="fas fa-heart fa-lg" style="color:black"></i>
      

</div>

    </a>
    <span id="likeCount-{{article.pk}}">{{article.like_users.all|length}}</span> 명이 이 글을 좋아합니다.
    <hr>
  

</div>

  <a href="

<div data-gb-custom-block data-tag="url" data-0='articles:create'></div>">CREATE</a>

    <script>
      const likeButtonList = document.querySelectorAll('.likeButtons')
      likeButtonList.forEach(likeButton => {
        likeButton.addEventListener('click', e => {
        // 1. axios로 요청보내기(like)
        //const articleID = e.target.getAttribute('data-id')
        const articleID = e.target.dataset.id
                          // -> data- 로 시작하는 attribute는 dataset에 저장되고, dash 뒤의 id로 데려올 수 있음
        
        <div data-gb-custom-block data-tag="if">

          axios.get(`/articles/${articleID}/like_api/`)
            .then( res => {
              // 결과 받은 뒤에 할 것들
              
              likeCount = document.querySelector(`#likeCount-${articleID}`).innerText = res.data.count

              // 현재 db에 저장된 값이 liked=True 라면,
              if (res.data.liked){
                e.target.style.color = 'crimson'
              }else{
                e.target.style.color = 'black'
              }
            })
        

<div data-gb-custom-block data-tag="else"></div>

            alert('비 로그인 사용자는 좋아요룰 누를 수 없어요 ㅠ_ㅠ')
        

</div>

      })
    })
    </script>

</div>

`views.py`

@login_required
def like_api(request, article_pk):
    user = request.user 
    article = get_object_or_404(Article, pk=article_pk)
    
    if article.like_users.filter(pk=user.pk).exists():
        article.like_users.remove(user)
        liked = False
    else:
        article.like_users.add(user)
        liked = True

    context = {
        'liked': liked,
        'count': article.like_users.count()
    }

    return JsonResponse(context)

Previousthis keyword NextIntro to Vue.js

Last updated 1 year ago

What is AJAX?

AJAX 요청

XMLHttpREquest (XHR)

Django API: Ping-Pong 만들기

art package 사용하기

ping.html

views.py

좋아요 AJAX로 구현하기

index.html

views.py

`art` package 사용하기

`ping.html`

`views.py`

`index.html`

`views.py`