등록하기 버튼을 눌렀을떄 아무런 반응이 없어요 !
몽고DB에도 기록이 안되어있네요 .
코드상에 어떤 문제가 있는걸까요?
보고 계신 화면
전체를 캡처해 주시면, 튜터님들이 빠르게 상황을 이해할 수 있어요.
작성한 코드 및 에러 메세지
오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
//------------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" />
<title>127 홈마 사진 평점 모음집</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link
href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="index.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function show(){
$("#postbox").show()
}
function hide(){
$("#postbox").hide()
}
$(document).ready(function(){
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
data: {},
success: function(response){
let temp = response["temp"]
$("#temp").text(temp)
}
})
});
function listing(){
let url = $('#url').val();
let star = $('#star').val();
let comment = $('#comment').val();
$.ajax({
type:"POST",
url:"/127",
data:{url_give:url, star_give:star, comment_give:comment},
success: function (response) {
alert(response["msg"]);
window.location.reload();
},
})
}
</script>
</head>
<body>
<div class="post-box">
<h1>우리칠 사진 모음집</h1>
<button onclick="show()" class="btn">사진기록하기</button>
<p>현재온도 : <span id="temp">00.0</span>도</p>
</div>
<div class="posting" id = "postbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="url" placeholder="name@example.com">
<label for="floatingInput">이미지 url</label>
</div>
<div class="form-floating">
<select class="form-select" id="star" aria-label="Floating label select example">
<option selected>별점 매기기</option>
<option value="1">⭐️</option>
<option value="2">⭐️⭐️</option>
<option value="3">⭐️⭐️⭐️</option>
<option value="4">⭐️⭐️⭐️⭐️</option>
<option value="5">⭐️⭐️⭐️⭐️⭐️</option>
</select>
<label for="floatingSelect">Works with selects</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="comment" style="height: 100px"></textarea>
<label for="floatingTextarea2">Comments</label>
</div>
<button id="listing()" type="button" class="btn btn-primary">등록하기</button>
<button type="button" class="btn btn-primary" onclick="hide()">닫기</button>
</div>
<div class="wrap" >
<div class="row row-cols-1 row-cols-md-4 g-4"id="cards">
<div class="col">
<div class="card h-100">
<img src="https://mblogthumb-phinf.pstatic.net/MjAyMTAyMTZfMjAz/MDAxNjEzNDcxODY1ODA1.4prahkh-AKoDUDnaW-DUtXI4ZEePxvFRhBKQJFZT9eQg.CDoVpIB3KFHU7GI-ipmaafX6X0JIoVAwgMJo2ezOVEEg.JPEG.myonkk/IMG_2650.JPG?type=w800" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다.</h5>
<p>⭐⭐⭐</p>
<p class="card-text">여기에 내용이 들어갑니다.</p>
<p class="comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://mblogthumb-phinf.pstatic.net/MjAyMTAyMTZfMjAz/MDAxNjEzNDcxODY1ODA1.4prahkh-AKoDUDnaW-DUtXI4ZEePxvFRhBKQJFZT9eQg.CDoVpIB3KFHU7GI-ipmaafX6X0JIoVAwgMJo2ezOVEEg.JPEG.myonkk/IMG_2650.JPG?type=w800" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다.</h5>
<p>⭐⭐⭐</p>
<p class="card-text">여기에 내용이 들어갑니다.</p>
<p class="comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://mblogthumb-phinf.pstatic.net/MjAyMTAyMTZfMjAz/MDAxNjEzNDcxODY1ODA1.4prahkh-AKoDUDnaW-DUtXI4ZEePxvFRhBKQJFZT9eQg.CDoVpIB3KFHU7GI-ipmaafX6X0JIoVAwgMJo2ezOVEEg.JPEG.myonkk/IMG_2650.JPG?type=w800" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다.</h5>
<p>⭐⭐⭐</p>
<p class="card-text">여기에 내용이 들어갑니다.</p>
<p class="comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://mblogthumb-phinf.pstatic.net/MjAyMTAyMTZfMjAz/MDAxNjEzNDcxODY1ODA1.4prahkh-AKoDUDnaW-DUtXI4ZEePxvFRhBKQJFZT9eQg.CDoVpIB3KFHU7GI-ipmaafX6X0JIoVAwgMJo2ezOVEEg.JPEG.myonkk/IMG_2650.JPG?type=w800" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다.</h5>
<p>⭐⭐⭐</p>
<p class="card-text">여기에 내용이 들어갑니다.</p>
<p class="comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
//--------------app.py--------------//
from pymongo import MongoClient
from flask import Flask, render_template, jsonify, request
app = Flask(__name__)
client = MongoClient(
'mongodb+srv://eunshu12:Mulberry1!@cluster0.x4jop40.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
@app.route('/')
def home():
return render_template('index.html')
@app.route("/127", methods=["POST"])
def web_mars_post():
url_receive = request.form['url_give']
star_receive = request.form['star_give']
comment_receive = request.form['comment_give']
doc = {
'url': url_receive,
'star': star_receive,
'comment': comment_receive
}
db.nct.insert_one(doc)
return jsonify({'msg': '주문완료!'})
@app.route("/127", methods=["GET"])
def web_127_get():
order_list = list(db.mars.find({}, {'_id': False}))
return jsonify({'orders': order_list})
if __name__ == '__main__':
app.run('0.0.0.0', port=8000, debug=True)
