커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
Python flask 서버에서 html로 뿌려주려는데 잘 안되요...
undefined주차
신*민
댓글
3
・
추천
1
・
조회수
11
조회수
11
답변 완료
안녕하세요,
강의를 완강하고 복습하려고 이것저것 해보는 중입니다.
4주차 강의 중 GET방식으로 데이터를 조회할 때, 아래 title_give= 뒤에 input box값을 $('#id값')으로 넣어줬는데 안되더라구요.
그래서 여기저기 찾아보니 이런 경우에는 POST방식으로 값을 전달해야 한다고 해서 그렇게 해서 성공하긴 했는데,
GET방식에서는 input box값을 전달하는 방식으로 조회기능을 만들 수 없는 것인가요? 아니면 제가 잘 모르는 것일까요?
(관련 강의 자료)
아래는 POST방식으로 처리한 코드입니다.
(서버)
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
import urllib.request
import urllib.parse
import requests
from bs4 import BeautifulSoup
# from pymongo import MongoClient
# client = MongoClient('내 URL')
# db = client.dbsparta
@app.route('/')
def home():
return render_template('index.html')
@app.route("/result", methods=["POST"])
def movie_post():
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'}
# url_lib = [
# 'https://www.youtube.com/results?search_query=',
# 'https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query='
# ]
# class_lib = [
# 'yt-simple-endpoint style-scope ytd-video-renderer',
# 'api_txt_lines total_tit _cross_trigger'
# ]
doc = []
base_url = 'https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query='
keyword_receive = request.form['keyword_give']
url = base_url + urllib.parse.quote_plus(keyword_receive)
html = urllib.request.urlopen(url).read()
soup = BeautifulSoup(html, 'html.parser')
result = soup.find_all(class_='api_txt_lines total_tit _cross_trigger')
for r in result:
doc.append({
'title' : r.text,
'url' : r.attrs['href']
})
print(doc)
return jsonify({'result':doc})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
(클라이언트)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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>
<title>블로그 검색</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<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://slpjesuis.com/wp-content/uploads/2022/05/blog-word-cloud1.jpeg');
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;
}
.mybtns {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.mybtns > button {
margin-right: 10px;
}
</style>
<script>
function posting() {
let keyword = $('#keyword').val()
$.ajax({
type: 'POST',
url: '/result',
data: {keyword_give: keyword},
success: function (response) {
console.log(response['result'])
let rows = response['result']
let temp_html = ``
$('#result').empty()
for (let i = 0; i < rows.length; i++) {
let title = rows[i]['title']
let url = rows[i]['url']
temp_html = `<li><a target="_blank" href="${url}">${title}</li>`
$('#result').append(temp_html)
// window.location.reload()
}
}
});
}
function open_box(){
$('#post-box').show()
}
function close_box(){
$('#post-box').hide()
}
</script>
</head>
<body>
<div class="mytitle">
<h1>검색 엔진</h1>
<button onclick="open_box()">검색</button>
</div>
<div class="mypost" id="post-box">
<div class="form-floating mb-3">
<input id="keyword" class="form-control">
<label>검색어 입력</label>
</div>
<div class="mybtns">
<button onclick="posting()" type="button" class="btn btn-dark">검색하기</button>
<button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
</div>
<p>
</p>
<div class="row row-cols-1 row-cols-md-10 g-4" id="result">
<li>검색 결과 출력</li>
<li>검색 결과 출력</li>
<li>검색 결과 출력</li>
</div>
</div>
</body>
</html>
결과물
댓글 알림
