4-7 [화성땅 공동구매] - POST 연습(주문 저장)

<<<미션>>>
웹사이트에서 이름,주소,평수를 입력 후 버튼을 누르면
1)'주문완료' Alert뜨고
2) 새로고침되어 'GET 연결완료!'Alert뜨고
3) Mongo DB Atlas 에 데이터 저장됨

1. 요청 정보 : URL= /mars, 요청 방식 = POST
2. 클라이언트(ajax) → 서버(flask) : name, address, size
3. 서버(flask) → 클라이언트(ajax) : 메시지를 보냄 (주문 완료!)

 

먼저, 클라이언트와 서버 연결 확인

서버코드

@app.route("/mars", methods=["POST"])
def mars_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST 연결 완료!'})

클라이언트 코드

function save_order() {
    $.ajax({
        type: 'POST',
        url: '/mars',
        data: { sample_give:'데이터전송' },
        success: function (response) {
            alert(response['msg'])
        }
    });
}

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

 

 

서버만들기_name, address, size 정보를 받아서 저장

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

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

    db.orders.insert_one(doc)

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

 

 

클라이언트 만들기_name, address, size 정보를 보내기

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

---

해석 : 

버튼을누르면!!

 

👉 클라이언트 측에서: 

save_order 함수가 실행 > name, address, size를 jQuery로 가져옴 >

데이터를 실어보냄(약속되어 있는 name_give, address_give, size_give 로  )

 

그러면

👉 서버측에서:

창구에서 약속한대로 받아서 > DB에 저장 > '주문완료'라고 내려줌

 

그러면 

👉 클라이언트 측에서:

'주문완료' 메세지를 alert로 보여줌 > reload 

 

 

 

 

아어려워 아 미친듯이어려워 헷갈려 아ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ