4-8 [화성땅 공동구매] - GET 연습(주문 웹페이지에서 보여주기)

<<<미션>>>
웹사이트에서 이름,주소,평수를 입력 후 버튼을 누르면
화면을 새로고침 했을 때, DB에 저장된 리뷰가 화면에 올바르게 나타나는지 확인

 

1. 요청 정보 : URL= /mars, 요청 방식 = GET
2. 클라이언트(ajax) → 서버(flask) : 없음
3. 서버(flask) → 클라이언트(ajax) : 전체 주문을 보내주기

 

 

먼저, 클라이언트와 서버 확인하기

서버코드

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

클라이언트 코드

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

 

서버만들기_ 받을 것 없이 orders 에 주문정보를 담아서 내려주기만 하면 됨

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

클라이언트 만들기_ 응답을 잘 받아서 for 문으로 붙여주기

function show_order() {
    $('#order-box').empty()
    $.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)
            }

        }
    });
}