항해99) 웹종 4주차 [화성땅 공동구매] POST 연습

* 4-7 [화성땅 공동구매] POST 연습

(1) 주문하기 버튼 클릭하면 save order가 실행되고

<button onclick="save_order()" type="button" class="btn btn-warning mybtn">주문하기</button>

 

(2) name, address, size를 Jquery로 가져와서(let name = ~, let address = ~, let sie = ~, 식의 각각 name, address, size) name_give, address_give, size_give에 실어 보냄({name_give: name, address_give: address, size_give: size} 여기 식의 각각 name_give, address_give, size_give)

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()
                }
            });
        }

 

(3) 실어 온 것을 창구에서 약속한대로 받아다가

@app.route("/mars", methods=["POST"])
def web_mars_post():
    name_receive = request.form['name_give']
    address_receive = request.form['address_give']
    size_receive = request.form['size_give']

 

(4) 뭔가 일을 하고(여기선 db에 저장)

doc = {
        'name': name_receive,
        'address': address_receive,
        'size': size_receive
    }

    db.mars.insert_one(doc)

 

(5) 주문 완료라고 다시 내려주면

 return jsonify({'msg': '주문 완료!'})

 

(6) 프론트에서 그걸 받아서 msg만 alert로 보여주고 reload한다

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