Flask 기초 - REST API (2) (Ajax를 사용한 update, delete)

1) Ajax - 동기? 비동기?

동기: 앞의 작업이 끝나지 않는다면 다음 작업을 할 수 없다.
비동기: 앞의 작업 상태와 상관없이 다음 동작을 수행할 수 있다.

Ajax는 비동기식 자바스크립트와 XML의 줄임말로 REST API를 손쉽게 구현하기 위해 사용되는 프레임워크이다.
(손쉽게..............?)

 

- 간단하게 알아보는 Ajax의 형태, Flask와의 사용법

HTML파일 속 Ajax의 형태

$.ajax({
    url: '/ajax test',      //Ajax로 요청을 보낼 주소를 적음
    type: 'GET',  	    //어떤 방법으로 ?
    data: {},		    //무슨 데이터를 ?
    // url, type, data까지가 클라이언트가 서버에 요청하는 부분

    success: function(res){	// 데이터 요청 성공 후 실행할 함수
    	console.log(res)
    }
 })

/ajax test 주소에 GET 방식으로 데이터를 요청하고, 성공하면 함수를 실행한다.

그리고 아래는 위에 정의된 ajax를 이용하는 flask 코드이다.

from flask import Flask, jsonify	
app = Flask(__name__)

# API 기능 정의
@app.route('/ajax_test')
def name():
    dict_data = {
    	"name": "hayan"
    }
    return jsonify(dict_data)

HTML 파일의 ajax에서 console.log(res) 를 수행하면 {"name":"hayan"} 데이터를 출력한다.

 

 

 

---

- 간단하게 알아보는 Ajax의 형태, Flask와의 사용법 (2)

HTML파일에는 아래와 같이 ajax가 구현되어 있다.

ajax() 메소드 내 data 변수에 request를 이용해 전달된 데이터를 json 형태로 저장할 것이다.

 $.ajax({
                type: 'POST',     // type: HTTP 메서드 종류
                url: '{{url_for("ajax")}}',   // 요청 URL
                data: JSON.stringify(postdata), // 서버로 보낼 데이터
                dataType : 'JSON',
                contentType: "application/json", // 서버로 보낼 컨텐츠 유형
                // 요청 완료시 호출
                success: function(data){ 
                    alert('성공! 데이터 값:' + data.result2['id']+" " + data.result2['name']+ " " + data.result2['context'])
                },
                // 요청 실패시 호출
                error: function(request, status, error){
                    alert('ajax 통신 실패')
                    alert(error);
                }
            })
        })

POST 방식으로 생성된 데이터를 확인하고 있다. POST 요청을 통해 얻은 데이터를 json 형식으로 얻으려면 request.get_json()을 이용하면 된다는 것을 기억하자.

그리고 아래는 위의 ajax를 이용하는 flask 코드이다.

@app.route('/ajax', methods=['POST'])
def ajax():
    # json 형태로 데이터를 저장
    data = request.get_json()
    board.append(data)
    # 데이터를 반환
    return jsonify(result = "success", result2 = data)

jsonify를 이용하며 result와 result2 결과를 반환하는데 성공하면, ajax에서 

success: function(data){ 
                    alert('성공! 데이터 값:' + data.result2['id']+" " + data.result2['name']+ " " + data.result2['context'])
                }

를 통해 웹 페이지에 알림창을 띄워준다. 

 

이렇게 만들어진 form에 내용을 입력하고 execute하면 아래와 같은 알림창이 뜬다.

 

---

2) UPDATE와 DELETE 구현

(단, 삭제되거나 수정되는 데이터는 board(게시판)의 가장 마지막 데이터다.)

 

HTML (UPDATE와 DELETE의 ajax)

=== update ===
$('#update').click(function(){
            var id = $('#id1').val();
            var name = $('#name1').val();
            var context = $('#context1').val();

            var postdata = {
                'id':id, 'name':name, 'context':context
            }
            $.ajax({
                type: 'PATCH',
                url: '{{url_for("put")}}',
                data: JSON.stringify(postdata),
                dataType : 'JSON',
                contentType: "application/json",
                success: function(data){
                    alert("성공! 새로고침")
                    window.location.reload();
                },
                error: function(request, status, error){
                    alert('ajax 통신 실패')
                    alert(error);
                }
            })
        })
        

=== delete ===
$('#delete').click(function(){
            $.ajax({
                type: 'DELETE',
                url: '{{url_for("delete")}}',
                contentType: "application/json",
                success: function(){
                    alert("성공! 새로고침")
                    window.location.reload();
                },
                error: function(request, status, error){
                    alert('ajax 통신 실패')
                    alert(error);
                }
            })
        })

두 ajax 모두 성공 시 알림창을 띄워주는 함수와 실패 시 error를 전달해주는 함수가 있다.

 

# DELETE
@app.route('/board', methods=['DELETE']) # 삭제 시 method는 DELETE
def delete():
    del board[-1]
    return jsonify({"result":"success"})
    

# UPDATE
@app.route('/board', methods=['PATCH']) # 수정 시 method는 PATCH 사용
def put():
    data = request.get_json()  # 데이터를 json 형태로 받아옴
    board[-1] = data  # 제일 마지막 데이터를 data로 변경

    return jsonify({"result":"success"})

UPDATE할 때 메서드는 PATCH를 사용했다. 글 목록의 맨 마지막을 지우거나 수정하기 때문에

board[-1]을 사용하여 글에 접근할 수 있다.

두 작업 모두 성공 시 json형태로 "result":success"를 반환한다. 여기서 success는 ajax에 작성된 success: 부분을 받아온다.

 

 

출처: 강의, 코드 참고는 엘리스 AI트랙