기능
- 주문하기(POST): 정보 입력 후 '주문하기' 버튼클릭 시 주문목록에 추가
- 주문내역보기(GET): 페이지 로딩 후 하단 주문 목록이 자동으로 보이기
- 1.클라이언트와 서버 연결 확인하기
2.서버부터 만들기
3.클라이언트 만들기
4.완성 확인하기
POST (주문내역 저장하기)
app.py
@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({'result': 'success', 'msg': '주문 완료!'})
index.html
function save_order() {
let name = $('#order-name').val();
let count = $('#order-count').val();
let address = $('#order-address').val();
let phone = $('#order-phone').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();
}
}
})
}
GET (주문내역 보여주기)
app.py
@app.route('/order', methods=['GET'])
def view_orders():
orders = list(db.orders.find({}, {'_id': False}))
return jsonify({'result': 'success', 'orders': orders})
index.html
function view_orders() {
$.ajax({
type: "GET",
url: "/order",
data: {},
success: function (response) {
if (response['result'] == 'success') {
let orders = response['orders'];
for (let i = 0; i < orders.length; i++) {
let name = orders[i]['name'];
let count = orders[i]['count'];
let address = orders[i]['address'];
let phone = orders[i]['phone'];
let temp_html = `<tr>
<th scope="row">${name}</th>
<td>${count}</td>
<td>${address}</td>
<td>${phone}</td>
</tr>`
$('#order-box').append(temp_html);
}
}
}
})
}