웹개발 종합반 - 4주차 - 08. [화성땅 공동구매] - GET 연습(주문 보여주기)

이번엔 GET방식을 이용해서 DB에 있는 내용들을 웹페이지로 보내서 띄울 것이다!

 

1.app.py에서 DB에서 받은 정보를 클라이언트로 보내주기!

 

@app.route("/mars", methods=["GET"])
def mars_get():
    orders_list = list(db.mars.find({},{'_id:False}))  #mars 데이터에서 id만 제외하고 받아오기
    return jsonify({'orders':orders_list})  #받아온 데이터를 JSON형태로 바꿔서 리턴하기

2.클라이언트에서 서버로부터 받은 데이터를 웹페이지에 보여주기!

 

//먼저 테이블에 id를 줘서 ajax로 해당 셀렉터를 선택해주자

<tbody id="order-list">
<tr>
<td>홍길동</td>
<td>서울시 용산구</td>
<td>20평</td>
</tr>
<tr>

$(document).ready(function () { //도큐먼트가 준비되면 해당 function을 실행
    $('#order-list').empty();  //처음 orderlist 비우기
    show_order(); // 가져온 orderlist 보여주는 기능를 실행
});
function show_order() {
$.ajax({
type: 'GET', 
url: '/mars',
data: {},
success: function (response) {
    let rows = response['orders'] //받아온 JSON 형태의 데이터중 orders만 뽑기
    for(i=0;i <rows.length;i++){ 
        let name = rows[i]['name']; //orders의 name 
        let address = rows[i]['address']; //orders의 address
        let size = rows[i]['size']; ////orders의 size
        let htmlTemp  = `<tr>   //order-list안에 형태
                    <td>${name}</td>
                    <td>${address}</td>
                    <td>${size}</td>
                        </tr>`
        $('#order-list').append(htmlTemp)  // 위 htmlTemp를 order-list에 넣기
    }
}
});
}

 

 

이렇게 한다면

이런 식으로 아래 테이블에 DB에서 받아온 데이터가 나온다