axios.get을 사용해서 데이터를 요청할 때 url 링크에 params를 추가해서 요청을 보내는 방법에 대해 알아보았다.
위와 같이 checkBox에서 내가 선택한 장르의 id를 url 요청 시 함께 보내고 싶었다.
1. checkBox 생성하기
<h3>장르를 선택해주세요!</h3>
<form id='genreForm'>
{% for genre in genres %}
<input class='genreClass' type="checkbox" name='genres' value= '{{ genre.id }}'>{{ genre.name }}
{% endfor %}
<br></br>
<button id='btn'>제출</button>
</form>
<div id='movieList'>
</div>먼저 위와 같이 checkBox를 만들어 주었으면 name:genres, value는 해당 장르의 id값이 선택되도록 만들어주었다. 이렇게 form 태그를 만들어주면 내가 선택한 장르의 id를 바로 view에서 받아서 서버와 연동할 수 있다!
2. checkBox 에서 선택한 장르 id 가져오기
const form = document.querySelector('#genreForm')
const genreSlt = document.querySelectorAll('.genreClass')
const getMovie = async function (event){
event.preventDefault()
genres = []
genreSlt.forEach((genre) => {
if (genre.checked) {
genres.push(genre.value)
}
})CheckBox의 input들을 하나씩 순회하면서 checked 항목이 true인지, false인지 확인해보았다.
checkBox가 체크된 input들은 checked가 true를 반환하기 때문에 true인 genre만 genres 배열에 추가해주는 방식으로 골라냈다.
- checked 부분이 true인 것을 확인할 수 있다.
3. check 된 장르 리스트를 axios.get 요청에 담아서 보내기
가장 어려웠던 부분이다. axios.get 요청 시 데이터를 어떻게 보내고 받는지 이해가 많이 부족했는데 이 부분을 진행하며 많이 배웠다.
js 코드이다.
const res = await axios.get('http://127.0.0.1:8000/movies/recommended_submit/',{
params:{
genres:genres
}기존에 headers를 추가할 때 {url},{},{} 에서 세 번째 중괄호에 값을 담아서 보냈다. 이번에도 params를 추가해주기 위해 세 번째 중괄호에 값을 담아서 보내려고 했더니 계속해서 값을 인식하지 못했다. 혹시나 하는 마음에 두 번째 중괄호에 값을 담아서 보냈더니 성공!
- config -> genres에 내가 선택한 장르들의 id가 담겨있는 것이 확인된다!
4. views.py 에서 requset 받고 json으로 뿌려주기
@require_safe
def recommended_submit(request):
if request.user.is_authenticated:
genres = request.GET
requestGenres = genres.getlist('genres[]')
movies = Movie.objects.filter(genres__in=requestGenres)
movies = list(set(movies))[0:10]
moviesData = MovieSerializer(movies,many=True)
return JsonResponse(moviesData.data, safe=False)Get 요청으로 보냈기에 request.GET을 사용하여 데이터를 받아온다.
이때 받아온 데이터의 형식은 querydict 이다.
따라서 데이터를 처리하기 쉽게 형식을 바꾸어줄 필요가 있다.
querydict.getlist('key')를 사용하여 기존 querydict를 list 형식으로 변환해주었다.
이후 내가 보낸 genre_id를 가지고 있는 movie 정보만 뽑아낼 수 있도록 Movie.objects.filter(genres__in = requestsGenres) 를 사용해주었다.
이때, 생성된 movies 는 queryset 형식이어서 json으로 뿌려주기 위해 미리 MovieSerializer를 생성해놓고 json 형식으로 변환을 해주었다.
이후 JsonResponse로 json을 뿌려주는데 이때 moviesData.data는 dictionary 자료형이 아님으로 safe=False라는 인자를 추가해주어야 한다.
5. 최종 결과
위 처리 결과 다음과 같이 내가 원하는 장르의 영화과 밑에 나타나는 것을 볼 수 있다.
6. 정리
단순하게 페이지를 새로고침 하면서 데이터를 가져와서 새 창에 띄우는 것은 어렵지 않다. 하지만 페이지를 새로고침 하지 않고 비동기 형식으로 데이터를 불러와서 띄우는 것은 쉽지 않았다.
axios.get을 할 때 같이 data를 넘겨주고 이를 view에서 받아서 처리하고 다시 json으로 보내주는 것을 받아서 templates에서 보여주는 것이 코드를 짜고 나면 당연한 수순이지만 처음에는 이 흐름을 바로 떠올리기가 어려웠다.
막상 해보니 어렵지 않은 과정이라고 생각이 들었다. 나이쑤!!!
(이제 list는 보내봤으니 dictionary 형태도 보내봐야지...)
