[4-8] 화성땅공동 구매 POST연습 문제 관련

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

[4-8] 화성땅공동 구매 POST연습 문제 관련

undefined주차

나****애

・

추천

・

조회수

답변 완료

안녕하세요! 상기 문제 관련해서 질문이 있습니다.

강의 영상과 똑같이 코드를 작성했는데, "주문하기" 버튼을 눌러도 아무 반응이 없습니다.

버튼을 누르면 주문완료라는 멘트가 뜨고, 주문자 리스트에 주문한 내용이 반영되고, 몽고DB에도 반영이 되어야 하는데 하나도 안됩니다.

혹시 제 코드에 문제가 있을까요?

[클라이언트/Index.html 코드]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"crossorigin="anonymous"></script>

    <link href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap" rel="stylesheet">

    <title>선착순 공동구매</title>

    <style>
        * {
            font-family: 'Gowun Batang', serif;
            color: white;
        }

        body {
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://cdn.aitimes.com/news/photo/202010/132592_129694_3139.jpg');
            background-position: center;
            background-size: cover;
        }

        h1 {
            font-weight: bold;
        }

        .order {
            width: 500px;
            margin: 60px auto 0px auto;
            padding-bottom: 60px;
        }

        .mybtn {
            width: 100%;
        }

        .order > table {
            margin : 40px 0;
            font-size: 18px;
        }

        option {
            color: black;
        }
    </style><script>
        $(document).ready(function () {
            show_order();
        });
        function show_order() {
            $.ajax({
                type: 'GET',
                url: '/mars',
                data: {},
                success: function (response) {
                    alert(response['msg'])
                }
            });
        }
        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()
                }
            });
        }
    </script>
</head>
<body><div class="mask"></div><div class="order"><h1>화성에 땅 사놓기!</h1><h3>가격: 평 당 500원</h3><p>
            화성에 땅을 사둘 수 있다고?<br/>
            앞으로 백년 간 오지 않을 기회. 화성에서 즐기는 노후!
        </p><div class="order-info"><div class="input-group mb-3"><span class="input-group-text">이름</span><input id="name" type="text" class="form-control"></div><div class="input-group mb-3"><span class="input-group-text">주소</span><input id="address" type="text" class="form-control"></div><div class="input-group mb-3"><label class="input-group-text" for="size">평수</label><select class="form-select" id="size"><option selected>-- 주문 평수 --</option><option value="10평">10평</option><option value="20평">20평</option><option value="30평">30평</option><option value="40평">40평</option><option value="50평">50평</option></select></div><button onclick="save_order()" type="button" class="btn btn-warning mybtn">주문하기</button></div><table class="table"><thead><tr><th scope="col">이름</th><th scope="col">주소</th><th scope="col">평수</th></tr></thead><tbody><tr><td>홍길동</td><td>서울시 용산구</td><td>20평</td></tr><tr><td>임꺽정</td><td>부산시 동구</td><td>10평</td></tr><tr><td>세종대왕</td><td>세종시 대왕구</td><td>30평</td></tr></tbody></table></div>
</body>
</html>

[서버/app.py 코드]

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

@app.route('/')
def home():
   return render_template('index.html')

@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']

    doc = {
        'name': name_receive,
        'address': address_receive,
        'size': size_receive
    }
    db.orders.insert_one(doc)

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

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

if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)

댓글 알림