Ajax로 비동기 통신 보내기

ajax 란 javascript 을 활용해 xml 형식으로 비동기 통신을 하는 것을 의미한다.
아래 예시를 통해 버튼을 누리면 새로운 tag 을 삽입하는 예제를 보여준다.

당연하게도 HMTL 부분과 Django 내 view 부분을 작성해야 한다.

1.일반적인 Json 데이터를 Ajax 통신으로 서버에 보내기 및 받기

1.1 HTML Part

<!DOCTYPE html>
<!--ajax_app/templates/simple_page.html-->
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery Ajax Method</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
      $(function () {
        $("#requestBtn").on("click", function () {
          $.ajax({
            url: "{% url 'ajax_app:ajax_test'%}",
            data: { name: "홍길동" },
            method: "POST",
            dataType: "json",
          })
            .done(function (response) {
              alert("요청 성공");
              $("#reply").html(response["hello"]);
            })
            .fail(function () {
              alert("요청 실패");
            })
            .always(function () {
              alert("요청 완료");
            });
        });
      });
    </script>
  </head>

  <body>
    <h1>$.ajax() 메소드</h1>
    <button id="requestBtn">$.ajax() 메소드 실행</button>
    <div id="reply"></div>
    >
    <p id="text"></p>
  </body>
</html>

1.1.1

html page 안에 url: "{% url 'ajax_app:ajax_test'%}", 이 부분이 요청 될 url 이다.

1.1.2 요청 한 후 크게 2가지로 나뉘어 진다.

step 1: 요청 성공 or 요청 실패 -> step 2: always

1.1.2.1 요청 성공

          })
            .done(function (response) {
              alert("요청 성공");
              $("#reply").html(response["hello"]);
            })

요청 성공 시 tag id가 reply 인 tag 내 html tag 을 삽입 한다고 하는 것이다.

1.1.2.2 요청 실패 시

          })
            .fail(function () {
              alert("요청 실패");
            })

1.1.2.3 always

            .always(function () {
              alert("요청 완료");
            });

1.2 View

django view 내 아래와 같이 구성되어 있다.

중요하게 봐야 할 점은 Json으로 return 한다는 것이다.

# ajax_app/views.py
@csrf_exempt
def ajax_test(request):
    if request.method == 'POST':
        data = {"hello" : "<a href='#'>'Hello Ajax' from server</a>"}
        return JsonResponse(data)

여기서 보면 html tag 을 string 으로 구성한다음 json 으로 wrapping 해서 return 한다는 것을 알수 있다.

2. Ajax send form data

2.1 HTML

<script src="/static/ajax_app/click_ajax.js"></script>

<!-- ajax form 전송 test -->
<h1>$.ajax() Form 전송 메소드</h1>
    <form method="post" id="AjaxFormTest">
    <input type="checkbox" name="ajax" value="radio-button"> ajax form data
</form>
<button id="submit"> ajax form data 전송</button>
<div id="reply-form"></div>
<p id="replay-form-render-here"></p>

2.2 Javascript

위 html 에 <script src="/static/ajax_app/click_ajax.js"></script> 와 연결

$(function () {
$("#submit").on("click", function () {
    var form = $('#AjaxFormTest').serialize()
    console.log(form)
  $.ajax({
    url: "/ajax/ajax_form_test/",
    data: form,
    method: "POST",
    dataType: 'json'
  })
    .done(function (response) {
      alert("요청 성공");
      $("#reply").text(response["hello"]);
    })
    .fail(function () {
      alert("요청 실패");
    })
    .always(function () {
      alert("요청 완료");
    });
  });
});

form 데이터를 보낼때 var form = $('#AjaxFormTest').serialize() 해당 파트를 보면 정보를 serialization 하는 걸 볼수 있는데

<input type="checkbox" name="ajax" value="radio-button"> ajax form data

위 checkbox html tag 를 선택하게 되면 ajax=radio-button 형태로 serialize 된다.

2.3 View

@csrf_exempt
def ajax_form_test(request):
    if request.method == 'POST':
        data = {"hello": "form data send complete"}
        return JsonResponse(data)

3. Ajax send form data with Array

form 데이터를 javascript Array Type 으로 추가한다. 그 후 추가적으로 넣고 싶은 데이터가 있으면 Array 로 추가할수 있다.

3.1 javascript part

Javascript part

$(function () {
    $("#search_todo_button").on("click", function () {
        /*
        *   Description:
        *   checklist 을 검색하는 정보가 담겨 있는 form 정보를 ajax,post 로 전송합니다.
        *   <form id=search_checklist_form> </form> 해당 테그 안 input tag 의 form 정보를 전송합니다.
        *   view function school_management_app:search_checklist 으로 데이터를 전송합니다.
        *   return 값으로 받은 정보는 show_checklist.html 내 tbody 로 들어갑니다.
        *   <table><tbody id=checklist_tbody><tbody></table>
        *   TODO: 추후에는 값만 받아서 javascript 에서 parsing 하도록 설정
        * */

        // form 정보를 javascript Array 로 변환합니다.
        // example) [{name:'name' value: 'song'} ... ]
        let form = $('#search_todo_form').serializeArray() // <---- ① form 정보를 Array 로 변환함

        // top-navi 에 있는 유저 이름을 가져옵니다.
        let username = $('#right-top-username').text()  

        // 기존의 form 정보에 username 을 추가합니다.
        form.push({name: "username", value: username})  // <---- ② Array 에 새로운 데이터를 추가함

        $.ajax({
            cache: false,
            url: "http://0.0.0.0:8000/todo/search_todo",
            data: form,
            method: "POST",
            dataType: "json",
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
        }).done(function (response) {
            alert("요청 승인");
            $("#todo_tbody").html(response["content"]);
        }).fail(function () {
            alert("요청 실패");
        }).always(function () {
            alert("요청 종료");
        });
    });
});

3.2 view.py

request.POST['username']

view 에서는 위와 같이 접근 가능하다.

3.3 Html

search_todo_button 을 중점적으로 봐야 한다.

<form class="mg-b-20" action="{% url 'todo:search_todo' %}"
      id="search_todo_form" method="post">
    <div class="row gutters-8">
        <div class="col-lg-4 col-12 form-group"> {# 담당자 검색 #}
            <input type="text" placeholder="담당자" class="form-control" name="assignee">
        </div>
        <div class="col-lg-3 col-12 form-group"> {# 설명 검색 #}
            <input type="text" placeholder="설명" class="form-control" name="desc">
        </div>
        <div class="col-lg-3 col-12 form-group"> {# 시작 날짜 검색 #}
            <input type="text" placeholder="시작 날짜 ex)2019-05-23" class="form-control"
                   name="start_date">
        </div>
        <div class="col-lg-3 col-12 form-group"> {# 종료 날짜 검색 #}
            <input type="text" placeholder="종료 날짜 ex)2019-05-23" class="form-control"
                   name="end_date">
        </div>
        <div class="col-lg-3 col-12 form-group"> {# 완료 여부 #}
            <input type="text" placeholder="완료여부 ex) True" class="form-control" name="complete">
        </div>

        <div class="col-lg-2 col-12 form-group">
            <div class="fw-btn-fill btn-gradient-yellow" id="search_todo_button">SEARCH</div>
        </div>
    </div>
</form>

javascript asynch using ajax - pai-plznw4me/django-initializer GitHub Wiki

Ajax로 비동기 통신 보내기

1.일반적인 Json 데이터를 Ajax 통신으로 서버에 보내기 및 받기

1.1 HTML Part

1.1.1

1.1.2 요청 한 후 크게 2가지로 나뉘어 진다.

1.1.2.1 요청 성공

1.1.2.2 요청 실패 시

1.1.2.3 always

1.2 View

2. Ajax send form data

2.1 HTML

2.2 Javascript

2.3 View

3. Ajax send form data with Array

3.1 javascript part

Javascript part

3.2 view.py

3.3 Html

⚠️ GitHub.com Fallback ⚠️

javascript asynch using ajax - pai-plznw4me/django-initializer GitHub Wiki

Ajax로 비동기 통신 보내기

1.일반적인 Json 데이터를 Ajax 통신으로 서버에 보내기 및 받기

1.1 HTML Part

1.1.1

1.1.2 요청 한 후 크게 2가지로 나뉘어 진다.

1.1.2.1 요청 성공

1.1.2.2 요청 실패 시

1.1.2.3 always

1.2 View

2. Ajax send form data

2.1 HTML

2.2 Javascript

2.3 View

3. Ajax send form data with Array

3.1 javascript part

Javascript part

3.2 view.py

3.3 Html

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️