[JavaScript] JS와 jQuery를 사용하여 Flask에서 데이터를 json으로 받아 사용하기

2021.12.24 - [Study/JavaScript] - [JavaScript] Ajax에 대하여

[JavaScript] Ajax에 대하여

저번 게시글에서 말했듯이 새로고침을 하지 않고 리스트를 출력하게 하고 싶어 jQuery와 JS를 사용하여 Json 데이터를 활용해보겠습니다.

---

JS와 jQuery를 사용하여 Flask에서 데이터를 json으로 받아 사용하기

일단 Flask에서 현재 Mongodb에 있는 데이터를 가져오고, 그것을 json으로 변환해보겠습니다.

# app.py
from pymongo import MongoClient
from bson.json_util import dumps

app = Flask(__name__)
app.config['JSON_AS_ASCII'] = False
# jsonify 한글 인코딩 깨짐을 방지 하기위해 기존 ascii 인코딩 방식을 utf-8로 변경하기 위한 설정

client = MongoClient('localhost', 27017)  # db에서 데이터를 받아오기 위해 db 연결
db = client.vegan
collection = db['vegan']


@app.route('/data', methods=['POST'])  # POST 요청을 위해 methods=['POST'] 추가
def shop_region():
    region = request.form['region']  # 페이지에서 POST 요청한 값을 받아오기 위해 request.form['보내온 데이터 이름'] 추가
    users = collection.find({"자치구": region},
                            {'_id': False, '판매메뉴': False, 'index': False, '경도': False, '위도': False})
    data = dumps(users, ensure_ascii=False)  # 현재 pymongo 로 불러온 cursor 타입 데이터를 json으로 변환
    # 한글 인코딩 깨짐을 막기위해 ensure_ascii = False 추가
    return data

위 코드를 하나하나 알아보면 app 선언 후 아래 app.config ['JSON_AS_ASCII']는 기본적으로 jsonify는 ascii 인코딩 방식을 사용하지만 그걸 그대로 사용할 경우 한글이 깨지는 문제가 발생하기 때문에 utf-8 방식으로 바꿔주기 위한 설정입니다.

8~10 번째 줄은 mongodb에서 데이터를 받아오기 위해 연결하는 부분입니다.

 

그리고 POST 요청이 들어올 경우에 데이터를 전송할 수 있도록 methods를 POST로 설정해 준후,

가져올 데이터를 find를 통해 걸러줍니다.

 

마지막으로 dumps를 사용하여 pymongo 데이터 객체인 Cursor를 json으로 변환시켜 준 후, return을 통해 반환합니다. 

 

// scripts.js
function showShop() {
    $('#list-box').empty() // 다른 지역을 누를때마다 기존 리스트 지우기

    let region = event.target.value // 현재 이벤트가 발생한 객체의 값을 가져오기

    $.ajax({
            type: "POST",
            url: "/data",
            data: {region: region},
            success: function (response) {
                let test = JSON.parse(response)  // Json 문자열을 객체로 변환
                for (let i = 0; i < test.length; i++) {
                    let name = test[i]['상호명'];
                    let location = test[i]['도로명주소'];
                    let temp_html = `<li>상호명 : ${name}</li>
<li>도로명주소 : ${location}</li>`
                    $('#list-box').append(temp_html)
                }
            },
            error: function () {
                alert("POST 실패")
            },
        }
    )
}

이제 js 파일로 와서, 함수를 작성해줍니다!

이때, 함수가 호출될 때마다 새로운 리스트가 작성되어야 하기 때문에 jQuery의 empty를 사용하여 리스트를 지워줍니다.

 

그리고 불러올 데이터의 지역 값을 받아오기 위해 지역이 써져있는 버튼을 클릭했을 경우 그 지역 값을 받아올 수 있게 해야 하는데요.

let region = event.target.value // 현재 이벤트가 발생한 객체의 값을 가져오기​

 

위 코드처럼 event.target.value를 사용하면 현재 이벤트가 발생한 ( 여기서는 click 이벤트 ) 객체의 값을 가져올 수 있습니다. 이때 위처럼 사용하기 위해서는 

<button type=submit value='노원구' name=region class="detailgu" id="nowon-gu" onclick="showShop(this)">노원구
</button>

위처럼 onlick="함수명(this)"를 통해 가리킬 객체를 알려주는 this를 꼭 추가해줘야 합니다.

그 후 이제 Ajax를 이용하여  POST 요청이 들어왔을 때 할 행동을 넣어주면 됩니다.

 

POST 요청이 들어오면 Ajax는 /data url로 현재 클릭한 버튼의 value를 region에 저장하여 보냅니다.

그 후 전송된 region 값을 받은 app.py의 shop_region 함수는 그 값을 이용해 data를 만든 후 json으로 변환하여 다시 반환합니다.

위와 같은 행동이 정상적으로 이루어졌다면 Ajax안의 success 부분 코드가 실행되고, 만약 비정상적으로 실행되거나 오류가 발생한다면 error 부분 코드가 실행되게 됩니다.

 

이때 정상적으로 실행된다면 response에 반환된 데이터가 들어갑니다.

response에 저장된 json은 현재 문자열 형태이기 때문에 객체형으로 사용하기 위해 JSON.parse를 사용하여 변환시켜줍니다.

그 후에는 사용할 데이터를 변수에 담고, jQuery를 이용하여 html의 id를 사용하여 append를 통해 데이터를 넣어줍니다.