[Flask] 화성땅 공동구매 (4) GET 연습(주문 보여주기)

 

GET 연습(주문 보여주기)

---

 

앞의 게시글에서 주문 넣기(주문하기)(POST)를 완료했다면

 

그 포스트를 해당

 

 

창에 띄워주는 것 까지 해야한다.

 

우선 HTML파일(index.html) 부터 살펴보자

 

<script>
    $(document).ready(function () {
        show_order();
    });

    function show_order() {
        $.ajax({
            type: 'GET',
            url: '/mars',
            data: {},
            success: function (response) {
                alert(response['msg'])
            }
        });
    }

    function save_order() {
        let name = $('#name').val()
        let address = $('#address').val()
        let size = $('#size').val()


        $.ajax({
            type: 'POST',
            url: '/mars',
            data: {
                name_give : name,
                address_give : address,
                size_give : size
            },
            success: function (response) {
                alert(response['msg'])
                window.location.reload()
            }
        });
    }

</script>

 

여기서 확인되는 것은

 

$(document).ready(function () {
    show_order();
});

 

아 로딩이 되자마자 show_order()를 부르는 구나 를 알 수가 있다.

 

function show_order() {
    $.ajax({
        type: 'GET',
        url: '/mars',
        data: {},
        success: function (response) {
            alert(response['msg'])
        }
    });
}

 

그 show_order()은 GET 방식인데 /mars 로 한다. 불러오는 창구를 mars 로 한다는 것이다.

 

연결이 성공하면 msg를 띄워주는 방식이다.

 

그럼 서버 창 가보면 되겠다.

 

 

@app.route("/mars", methods=["GET"])
def web_mars_get():
    return jsonify({'msg': 'GET 연결 완료!'})

 

 

 

자 이제 DB에서 모든 데이터를 가져와야한다.

 

그럼?

 

참조

2022.12.29 - [𝐃𝐞𝐯𝐞𝐥𝐨𝐩 ﹛𝐅𝐫𝐨𝐧𝐭-𝐞𝐧𝐝﹜/MongoDB] - [MongoDB] pymongo 라이브러리로 Mongo DB 조작하는 방법

 

참조에 나온 것 처럼 여러개 찾기를 이용한다.

 

 

@app.route("/mars", methods=["GET"])
def web_mars_get():
    order_list = list(db.mars.find({}, {'_id': False}))
    return jsonify({'orders': order_list})

 

해당 코드처럼 기입해준다.

 

 

해당 데이터 리스트들을 order_list 로 넣어준거고

 

그것을 'orders'로 내려준거다.

 

 

확인 되었다.

 

한개 더 주문해보자 한국시, 한국동, 몇평

 

자 주문하고 콘솔창 확인 해 보자

 

 

방금 넣은것도 포함해서 가져오는 것을 확인할 수 있다.

 

저 나열된 항목을

 

name address size 만 가져오게 만들어보자

 

function show_order() {
    $.ajax({
        type: 'GET',
        url: '/mars',
        data: {},
        success: function (response) {
            let rows = response['orders']
            for (let i = 0; i < rows.length; i++) {
                let name = rows[i]['name']
                let address = rows[i]['address']
                let size = rows[i]['size']

                console.log(name, address, size)
            }
        }
    });
}

 

어디서 많이 본 그림 아닌가?

 

참조

2022.12.27 - [𝐃𝐞𝐯𝐞𝐥𝐨𝐩 ﹛𝐅𝐫𝐨𝐧𝐭-𝐞𝐧𝐝﹜/Ajax] - [Ajax] (1) 시작하기

[Ajax] (1) 시작하기

 

그렇다면 RealtimeCityAir의 row값을 가져와보자 를 참조해보라

 

해당 코드를 실행하고 새로고침을 하면

 

mongoDB에서 해당되는 데이터만 가져온것을 확인할 수 있다.

 

 

자 이걸 콘솔창 말고 페이지에 찍어야된다?

 

이건?

 

그렇다 temp_html !! 내가 배웠던 내용이다.

 

참조

2022.12.27 - [𝐃𝐞𝐯𝐞𝐥𝐨𝐩 ﹛𝐅𝐫𝐨𝐧𝐭-𝐞𝐧𝐝﹜/Ajax] - [Ajax] (2) 연습하기

[Ajax] (2) 연습하기

Temp_html을 사용해주면 된다. 를 참조해라

function show_order() {
    $.ajax({
        type: 'GET',
        url: '/mars',
        data: {},
        success: function (response) {
            let rows = response['orders']
            for (let i = 0; i < rows.length; i++) {
                let name = rows[i]['name']
                let address = rows[i]['address']
                let size = rows[i]['size']

                let temp_html = `
                    <tr>
                        <td>${name}</td>
                        <td>${address}</td>
                        <td>${size}</td>
                    </tr>
                `
                $('#order-box').append(temp_html)
            }
        }
    });
}

temp_html 은 이렇게 정리해주고

 

이 tbody 인 

 

해당 박스를 order-box 로 지명해준다.

 

그 다음

 

센스있게 

 

<tr>
    <td>홍길동</td>
    <td>서울시 용산구</td>
    <td>20평</td>
</tr>
<tr>
    <td>임꺽정</td>
    <td>부산시 동구</td>
    <td>10평</td>
</tr>
<tr>
    <td>세종대왕</td>
    <td>세종시 대왕구</td>
    <td>30평</td>
</tr>

 

얘는 지워주자

 

그 후 새로고침 실행해주면

 

 

완료가 된 것을 확인할 수 있다.

 

2022-12-31 20-51-41.mp4

8.30MB