4주차 숙제중 다시 질문드려요 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

4주차 숙제중 다시 질문드려요

undefined주차

이*나

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

주문하기 버튼을 누르면 주문 완료! 라고 뜨긴 하는데 그 밑에 이름, 수량, 전화번호, 주소 부분에 업데이트가 안됩니다. 어떻게 해결하나요?

from flask import Flask, render_template, jsonify, request


app = Flask(__name__)


from pymongo import MongoClient


client = MongoClient('localhost', 27017)
db = client.dbhomework



## HTML 화면 보여주기
@app.route('/')
def homework():
    return render_template('index.html')



# 주문하기(POST) API
@app.route('/order', methods=['POST'])
def save_order():
    name_receive = request.form['name_give']
    count_receive = request.form['count_give']
    address_receive = request.form['address_give']
    phone_receive = request.form['phone_give']
    
    doc = {
        'name': name_receive,
        'count': count_receive,
        'address': address_receive,
        'phone': phone_receive
    }
    
    db.orders.insert_one(doc)
    
    return jsonify({'msg': '주문 완료!'})



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



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

<!doctype html>
<html lang="en">



<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>



    <title>1주차 상세페이지 과제</title>



    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
</head>
<style>
    *{
        font-family: 'Jua', sans-serif;
    }
    .mytitle {
        margin-left: 85px;
        padding: 20px;
        font-weight: bold;
    }
    .item-image {
        width: 500px;
        height: 500px;



        background-image: url("https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbRyQDp%2Fbtrtlngg2iQ%2F9j4zARKhKqlKJjWFZylY61%2Fimg.png");
        background-position: center;
        background-size: cover;
    }
    .item-desc {
        width: 500px;
        font-size: 15px;
        margin: 30px auto 30px auto;
    }
    .price {
        font-size: 13px;
    }
    .item-order {
        width: 500px;
        margin-bottom: 50px;
    }
    .btn-order{
        margin: auto;
        width: 100px;
        display: block;
    }
    .wrap{
        width: 500px;
        margin: auto;
    }
</style>



<script>
    


    function listing() {
        $.ajax({
            type: "GET",
            url: "/order",
            data: {},
            success: function (response) {
                    let orders = response['orders'];
                    for (let i = 0; i < orders.length; i++){
                        let name = orders[i]['name'];
                        let count = orders[i]['count'];
                        let phone = orders[i]['phone'];
                        let address = orders[i]['address'];


                        let tmep_html = `<tr>
                                            <th scope="row">$(name)</th>
                                            <td>$(count)</td>
                                            <td>$(phone)</td>
                                            <td>$(address)</td>
                                        </tr>`
                        $('#orders-box').append(temp_html)
                    }
            }
        })
    }


    function order() {
        let name = $('#order-name').val();
        let count = $('#order-count').val();
        let phone = $('#order-phone').val();
        let address = $('#order-address').val();
        
        $.ajax({
            type: "POST",
            url: "/order",
            data: {name_give:name, count_give:count, address_give:address, phone_give:phone },
            success: function (response) {
                    alert(response["msg"]);
                    window.location.reload();
            }
        })
    }
</script>
<body>
    <div class="wrap" >
        <h1 class="mytitle">Victory's Hanger</h1>
        <div class="item-image"></div>
        <div class="item-desc">
            <h2>대학생들 잇템! 옷장정리 <span class="price">세트가격 6,000~8,000 </span></h2>
            <p>* 설레는 새학기, 새내기 룩! *</p>
        </div>
        <div class="item-order">
                 <div class="input-group mb-3">
                     <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroup-sizing-default">주문자이름</span>
                    </div>
                    <input id="order-name" type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
                </div>



                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <label class="input-group-text" for="inputGroupSelect01">상품선택</label>
                    </div>
                    <select id="order-count" class="custom-select">
                        <option selected>--상품을 선택하세요--</option>
                        <option value="1">1번 프릴오픈숄더(화이트) & A라인스커트(블랙) 값 8,000</option>
                        <option value="2">2번 가오리핏벌룬니트(연보라) & A라인조끼원피스(블랙) 값 6,000</option>
                        <option value="3">3번 비숍소매와이셔츠(베이지) & 프린세스라인조끼원피스(브라운) 값 8,000</option>
                        <option value="4">4번 프릴오픈숄더(연하늘) & H라인스커트(크림) 값 8,000</option>
                        <option value="5">5번 에스닉롱원피스 값 5,000</option>
                        <option value="6">6번 프릴넥셔링티셔츠(크림) & 하이웨스트청바지(연청) 값 8,000</option>
                    </select>
                </div>



                <div class="item-order">
                     <div class="input-group mb-3">
                         <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-default">전화번호</span>
                        </div>
                        <input id="order-phone" type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
                    </div>



                <div class="item-order">
                     <div class="input-group mb-3">
                         <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-default">주소</span>
                        </div>
                        <input id="order-address" type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
                    </div>



                <button type="button" onclick="order()" class="btn btn-primary btn-order">주문하기</button>



                </div>
                </div>
                
                <table class="table">
                    <thead>
                      <tr>
                        <th scope="col">이름</th>
                        <th scope="col">수량</th>
                        <th scope="col">전화번호</th>
                        <th scope="col">주소</th>
                      </tr>
                    </thead>
                    <tbody id="orders-box">
                    </tbody>
                  </table>
            </body>



</html>

댓글 알림