커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
질문하기를 클릭했을때 궁금한것을 입력하세요에 입력한 내용이 들어가지 않습니다
undefined주차
북마크
댓글
1
추천
0
조회수
18
조회수
18
답변 완료

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

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


궁금한것을 입력하세요에 입력한 내용이 아래 div에 들어가게 하고 싶어요



스파르타 즉문즉답




작성한 코드 및 에러 메세지

<!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+Dodum&display=swap" rel="stylesheet" />


    <title>쇼핑몰</title>


    <style>
        * {
            font-family: "Gowun Dodum", sans-serif;
        }


        .mypic {
            width: 100%;
            height: 200px;


            background-image: linear-gradient(0deg,
                    rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0.5)),
                url("");
            background-position: center;
            background-size: cover;


            color: white;


            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }


        .mypic>h1 {
            font-size: 30px;
        }


        .mybox {
            width: 95%;
            max-width: 700px;
            padding: 20px;
            box-shadow: 0px 0px 10px 0px lightblue;
            margin: 20px auto;


        }


        .mybucket {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }


        .mybucket>input {
            width: 70%;
        }


        .mybox>li {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;


            margin-bottom: 10px;
            min-height: 48px;
        }


        .mybox>li>h2 {
            max-width: 75%;
            font-size: 20px;
            font-weight: 500;
            margin-right: auto;
            margin-bottom: 0px;
        }


        .mybox>li>h2.done {
            text-decoration: line-through;
        }


        .mypost {
            background-color: antiquewhite;
            padding-left: 30px;
            margin: 30px 0px 50px 0px;
            font-size: 20px;


            display: flex;
            align-items: center;
            justify-content: center;


            /* text-align: center; */
            /* position: relative; */
            /* top: 50%; */
            /* transform: translateY(-50%); */


            word-spacing: 30px
        }


        .mypost>l1,
        l2,
        l3,
        l4,
        l5,
        l6 {
            margin-right: 20px;
            margin-left: 20px;


            float: left
        }


        .button {
            border: 1px solid #bcbcbc;
            padding: 20px;


        }
    </style>
    <script>
        $(document).ready(function () {
            show_bucket();
        });
        function show_bucket() {
            fetch('/bucket').then(res => res.json()).then(data => {
                let rows = data['result']
                $('#bucket-list').empty()
                rows.forEach((a) => {
                    let bucket = a['bucket']
                    let temp_html = `<li>
                                        <h2>${bucket}</h2>
                                        <button type="button" class="btn btn-outline-primary">확인!</button>
                                    </li>`
                    $('#bucket-list').append(temp_html)
                })
            })
        }


        function save_bucket() {
            // let formData = new FormData();
            // formData.append("sample_give", "샘플데이터");


            let a = '확인'
                ('#save_bucket')


            function showMessage() {
                alert('안녕하세요!');
            }


            fetch('/bucket', { method: "POST", body: formData, }).then((response) => response.json()).then((data) => {
                alert(data["msg"]);
                window.location.reload();
            });
        }
        function mybox() {
            let click = '확인'
            $(`#mybox`).text(a)
            alert(click)
        }
    </script>
</head>


<body>
    <div class="mypic">
        <h1>게시판</h1>
    </div>
    <div class="mypost">
        <button.text>


            <l1><a href=http://127.0.0.1:5500/templates/index2.html>NOTICE</a></l1>
            <l2><a href=http://127.0.0.1:5500/templates/index2.html>FAQ</a></l2>
            <l3><a href=http://127.0.0.1:5500/templates/index2.html>Q&A</a></l3>
            <l4><a href=http://127.0.0.1:5500/templates/index2.html>1:1 문의</a></l4>
            <l5><a href=http://127.0.0.1:5500/templates/index2.html>CLASS</a></l5>
            <l6><a href=http://127.0.0.1:5500/templates/index2.html>입고정보</a></l6>
            </button>
    </div>
    <div class="mybox">
        <div class="mybucket">
            <input id="bucket" class="form-control" type="text" placeholder="궁금한것을 입력하세요" />
            <button onclick="save_bucket()" type="button" class="btn btn-outline-primary">질문하기</button>
        </div>
    </div>
    <!-- <div class="mybox" id="bucket-list"> -->
    <!-- <li> -->
    <!-- <h2>무엇을 도와드릴까요?</h2> -->
    <!-- <button onclick="done_bucket(5)" type="button" class="btn btn-outline-primary">완료!</button> -->
    <!-- </li> -->
    <!-- </div> -->
    <div class="mybox" id="bucket-list">
        <li>
            <h2>아이디와 비밀번호가 기억나지 않아요</h2>
            <button type="button" class="btn btn-outline-primary">확인!</button>
        </li>
        <li>
            <h2>회원정보 수정은 어디서 하나요</h2>
            <button type="button" class="btn btn-outline-primary">확인!</button>
        </li>
        <li>
            <h2>재고가 없어요 언제쯤 구입할 수 있나요</h2>
            <button type="button" class="btn btn-outline-primary">확인!</button>
        </li>
        <li>
            <h2>결제 방법에는 어떤것들이 있나요</h2>
            <button type="button" class="btn btn-outline-primary">확인!</button>
        </li>
        <li>
            <h2>반품 접수는 어떻게 하나요</h2>
            <button type="button" class="btn btn-outline-primary">확인!</button>
        </li>
    </div>
</body>


</html>


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


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


@app.route("/bucket", methods=["POST"])
def bucket_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST 연결 완료!'})
    
@app.route("/bucket", methods=["GET"])
def bucket_get():
    all_buckets = list(db.bucket.find({},{'_id':False}))
    return jsonify({'result': all_buckets})


if __name__ == '__main__':
    app.run('0.0.0.0', port=5001, debug=True)
취소
 공유
취소
댓글 0
댓글 알림
나의얼굴