[스파르타코딩클럽] 웹개발 종합반 4주차 숙제

✏️ 4주차 숙제
1주차에 완성한 쇼핑몰 완성하기! (주문하기, 주문 내역 보기)

[ 실행 화면 ]

[ 제출 코드 (html) ]

function postOrder() {
        let name = $('#name').val();
        let type = $('#inputGroupSelect01').val();
        let ship = $('#inputGroupSelect02').val();
        let address = $('#address').val();
        let phone = $('#phone').val();

        $.ajax({
            type: "POST",
            url: "/order",
            data: {name_give: name, type_give: type, ship_give: ship, address_give: address, phone_give: phone},
            success: function (response) { // 성공하면
                alert(response['msg']);
                window.location.reload();
            }
        })
    }


    function showOrder() {
        // 서버의 데이터를 받아오기
        $.ajax({
            type: "GET",
            url: "/order",
            data: {},
            success: function (response) {
                let orders = response['all_orders']
                for (let i = 0; i < orders.length; i++) {
                    let name = orders[i]['name']
                    let type = orders[i]['type']
                    let ship = orders[i]['ship']
                    let address = orders[i]['address']
                    let phone = orders[i]['phone']

                    let temp_html = `
                        <tr>
                            <td>${name}</td>
                            <td>${type}</td>
                            <td>${ship}</td>
                            <td>${address}</td>
                            <td>${phone}</td>
                        </tr>
                       `
                    $('#orders_list').append(temp_html)
                }
            }

[ 제출 코드 (app.py) ]

def save_order():
    name_receive = request.form['name_give']
    type_receive = request.form['type_give']
    ship_receive = request.form['ship_give']
    address_receive = request.form['address_give']
    phone_receive = request.form['phone_give']

    doc = {
        'name':name_receive,
        'type':type_receive,
        'ship':ship_receive,
        'address':address_receive,
        'phone':phone_receive
    }
    db.order.insert_one(doc)
    return jsonify({'msg': '주문되었습니다! 감사합니다! :)'})

# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
    orders = list(db.order.find({},{'_id':False}))
    return jsonify({'all_orders':orders})

후기

5주차를 끝내고 4주차 숙제와 함께 올려야지하고 미루던 것을 이제야 올린다..ㅎ
GET, POST에 대한 이해가 꽤 된 것 같다.