커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
4주차 숙제 원페이지 쇼핑물 완성하기 해설 영상
undefined주차
이*나
댓글
13
・
추천
0
・
조회수
13
조회수
13
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
6:40분 가량 강사님이 진행하시는 대로 코드를 잘 따라 썼는데 주문하기 버튼을 눌러도 '주문 완료!' 메세지가 뜨지 않습니다. app.py와 index.html 코드는 아래와 같습니다.
작성한 코드 및 에러 메세지
오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
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():
sample_receive = request.args.get('sample_give')
print(sample_receive)
return jsonify({'msg': '이 요청은 GET!'})
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;
}
.btn-order{
margin: auto;
width: 100px;
display: block;
}
.wrap{
width: 500px;
margin: auto;
}
</style>
<script>
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) {
if (response["result"] == "success") {
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>
</body>
</html>
댓글 알림
