4-13 '기록하기' 눌렀을 때 Post 가 정상 작동하지 않아요.

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

4-13 '기록하기' 눌렀을 때 Post 가 정상 작동하지 않아요.

undefined주차

고*현

・

추천

・

조회수

답변 완료

4-13에서 서버와 클라이언트를 만든 뒤, 기록하기 버튼을 누르면 선생님 강의 화면에서는 alert이 뜨는데, 저는 아무런 변화가 없어요. 터미널에서는 error 메세지가 나오구요. url_give 를 서버에서 이해하지 못한다는 것 같은데, 무엇이 잘못된 것인지 모르겠어요.

작성한 코드 및 에러 메세지

app.py 코드

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

import requests

from bs4 import BeautifulSoup

from pymongo import MongoClient

import certifi

ca = certifi.where()

client = MongoClient('mongodb+srv://sparta:test@cluster0.hq4jwjz.mongodb.net/?retryWrites=true&w=majority', tlsCAFile = ca)

db = client.dbsparta

@app.route('/')

def home():

return render_template('index.html')

@app.route("/movie", methods=["POST"])

def movie_post():

url_receive = request.form['url_give']

comment_receive = request.form['comment_give']

headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}

data = requests.get(url_receive,headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

ogtitle = soup.select_one('meta[property="og:title"]')

ogdesc = soup.select_one('meta[property="og:description"]')

ogimage = soup.select_one('meta[property="og:image"]')

doc = {

'title' : ogtitle,

'desc' : ogdesc,

'image' : ogimage,

'comment' : comment_receive

}

db.movies.insert_one(doc)

return jsonify({'msg':'저장 완료!'})

@app.route("/movie", methods=["GET"])

def movie_get():

return jsonify({'msg':'GET 연결 완료!'})

if __name__ == '__main__':

app.run('0.0.0.0', port=5000, debug=True)

---

Index.html 코드

<!doctype html>

<head>

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"

crossorigin="anonymous"></script>

<style>

* {

font-family: 'Gowun Dodum', sans-serif;

}

.mytitle {

width: 100%;

height: 250px;

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');

background-position: center;

background-size: cover;

color: white;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

.mytitle>button {

width: 200px;

height: 50px;

background-color: transparent;

color: white;

border-radius: 50px;

border: 1px solid white;

margin-top: 10px;

}

.mytitle>button:hover {

border: 2px solid white;

}

.mycomment {

color: gray;

}

.mycards {

margin: 20px auto 0px auto;

width: 95%;

max-width: 1200px;

}

.mypost {

width: 95%;

max-width: 500px;

margin: 20px auto 0px auto;

padding: 20px;

box-shadow: 0px 0px 3px 0px gray;

display: none;

}

.mybtns {

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;

margin-top: 20px;

}

.mybtns>button {

margin-right: 10px;

}

</style>

$(document).ready(function () {

listing();

});

function listing() {

fetch('/movie').then((res) => res.json()).then((data) => {

console.log(data)

alert(data['msg'])

})

}

function posting() {

let url = $('#url').val()

let comment = $('#comment').val()

let formData = new FormData();

formData.append("url_give", url);

formData.append("comment_give", comment);

fetch('/movie', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {

alert(data['msg'])

})

}

function open_box() {

$('#post-box').show()

}

function close_box() {

$('#post-box').hide()

}

</script>

</head>

<body>

</div>

<label>영화URL</label>

</div>

</div>

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top">

<h5 class="card-title">영화 제목이 들어갑니다</h5>

<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top">

<h5 class="card-title">영화 제목이 들어갑니다</h5>

<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top">

<h5 class="card-title">영화 제목이 들어갑니다</h5>

<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top">

<h5 class="card-title">영화 제목이 들어갑니다</h5>

<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>

</div>

</body>

</html>

Terminal 에러 메세지