javascript ajax로 데이터 값을 보낼 때, html 페이지를 열면서 데이터 값도 전달하기
#230112
문제
rank 페이지에서 ‘리뷰 확인’ 버튼을 누르면 해당 영화의 제목이 review 페이지 영화제목에 보이도록, 버튼을 눌렀을 때 영화 제목 값을 review.html에 전달해주면서 동시에 review.html 페이지가 열리게 하고 싶다.
시도
-
버튼을 누르면
push_review함수를 호출한다. 이 때,title데이터를 파라미터로 보낸다.push_review함수에서title값을title-give에 넣어 서버에 POST로 보낸다.서버에서
title-give값을 받고remder_template함수를 호출하여review.html페이지를 열고, 받은 데이터 값도 함께 넘긴다.
function listing() {
$.ajax({
type: 'GET',
url: '/rank',
data: {},
success: function (response) {
let rows = response["movieRank"]
for(let i = 0; i < rows.length; i++){
let title = rows[i]["title"]
let img = rows[i]["img"]
let release = rows[i]["release"]
let r_rate = rows[i]["r_rate"]
let temp_html = `<div class="col">
<div class="rating">${r_rate}</div>
<div class="card h-60 cardBox">
<img src="${img}"
class="card-img-top cardImg" >
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${release}</p>
</div>
<btn type="button"token interpolation">${title}')" class="reviewBtn">리뷰 확인</btn>
</div>
</div>`
$('#cards-box').append(temp_html)
}
}
})
}
function push_review(title) {
$.ajax({
type: 'POST',
url: '/rank/push_review',
data: {title_give: title},
success: function (response) {
// alert(response['msg'])
// window.location.reload()
}
});
}# rank에서 '리뷰 확인' 선택시 리뷰 페이지로 넘어가는 기능
@app.route('/rank/push_review', methods=["POST"])
def review_pushReview():
selected_title_receive = request.form['title_give']
print(selected_title_receive)
return render_template('review.html', a=selected_title_receive) [결과] title 데이터를 받고 POST로 서버에 넘겨서 서버가 데이터를 받은 것까지는 확인했으나, return 구문이 실행되지 않았다.
전달하는 데이터 값 없이 페이지만 열리게 하려고 return render_template('review.html') 만 작성해도 실행되지 않았다.
알고보니, render_template 함수 자체가 “GET” 요청을 받았을 때 페이지를 띄워주는 개념이어서 “POST”에서는 동작하지 않는다.
-
‘리뷰 확인’ 버튼을 누르면
<a>tag로 ‘/rank/${순위숫자}’ 주소로 이동하도록 만든다.‘/rank/${순위숫자}’ 주소로 이동하면 순위에 해당하는 영화제목을 가져오고
render_template함수로review.html페이지를 띄우고selected_movie(영화 제목)도 넘겨준다.
function listing() {
$.ajax({
type: 'GET',
url: '/rank',
data: {},
success: function (response) {
let rows = response["movieRank"]
for(let i = 0; i < rows.length; i++){
let title = rows[i]["title"]
let img = rows[i]["img"]
let release = rows[i]["release"]
let r_rate = rows[i]["r_rate"]
let address = "rank/" + r_rate.split(".")[1]
let temp_html = `<div class="col">
<div class="rating">${r_rate}</div>
<div class="card h-60 cardBox">
<img src="${img}"
class="card-img-top cardImg" >
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${release}</p>
</div>
<a href="/${address}" class="reviewBtn">리뷰 확인</button>
</div>
</div>`
$('#cards-box').append(temp_html)
}
}
})
}@app.route('/rank/1')
def rank1():
selected_movie = db.movieRank.find_one({'r_rate': 'No.1'})["title"]
return render_template('review.html', selected_movie = selected_movie)[결과] 페이지 연결도 잘 되고 title 값도 잘 전달되지만, 이런 방식이라면 movieRank 에 있는 데이터 개수만큼 호출되는 주소에 대한 함수를 만들어야 한다. movieRank 데이터가 늘어난다면 추가된 데이터들은 정상 동작되지 않을 것…
해결
버튼을 눌렀을 때, /rankselect?title={parameter} 주소로 이동하는 <a> 태그를 건다.
parameter는 영화의 순위 값이다.
‘/rankselect’ url로 title=순위 에 대한 “GET” 요청을 보내면, request.args.get("title") 으로 title(순위)값을 받을 수 있다.
받은 title 값을 가지고 movieRank 컬렉션에서 영화 제목을 가져올 수 있다.
render_template 함수로 review.html 페이지를 띄우고, 데이터도 전달 가능하다.
function listing() {
$.ajax({
type: 'GET',
url: '/rank',
data: {},
success: function (response) {
let rows = response["movieRank"]
for (let i = 0; i < rows.length; i++) {
let title = rows[i]["title"]
let img = rows[i]["img"]
let release = rows[i]["release"]
let r_rate = rows[i]["r_rate"]
let address = "rankselect"
let parameter = r_rate.split(".")[1]
let temp_html = `<div class="col">
<div class="rating">${r_rate}</div>
<div class="card h-60 cardBox">
<img src="${img}"
class="card-img-top cardImg" >
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${release}</p>
</div>
<a href="${address}?title=${parameter}" class="reviewBtn">리뷰 확인</a>
</div>
</div>`
$('#cards-box').append(temp_html)
}
}
})
}@app.route('/rankselect', methods=["GET"])
def rank1():
name = request.args.get("title")
selected_movie = db.movieRank.find_one({'r_rate': f'No.{name}'})["title"]
movie_list = list(db.movieRank.find({}, {'_id': False}))
movie_name = [i['title'] for i in movie_list]
return render_template('review.html', selected_movie = selected_movie, movie_name = movie_name)알게된 점
render_template함수 자체가 “GET” 요청을 받았을 때 페이지를 띄워주는 개념이어서 “POST”에서는 동작하지 않는다. 페이지를 띄운다는 것 자체가 화면을 달라고 하는 “GET” 요청일 때 가능하다./url주소?title=1이렇게 “GET” 요청을 보내면, 서버에서request.args.get("title")으로 title에 대한 값을 받을 수 있다. “POST”로 데이터를 보내야만 서버에서 받는 것이 아니다.
