<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
* Axios 홈페이지 들어가서, CDN 코드 하나 복사하기
https://axios-http.com/kr/docs/intro
시작하기 | Axios Docs
시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코
axios-http.com
# accounts > templates > accounts > profile.html
이제 form이 아니라 axios를 통해서 요청을 보내겠다
더 이상 form의 action과 method가 필요가 없어진다
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>{{ person.username }}님의 프로필 페이지</h1>
<div>
팔로잉 : {{ person.followings.all|length }} / 팔로워 : {{ person.followers.all|length }}
</div>
{% if request.user != person %}
<div>
{% comment %} 1. 요청은 axios로 대체되기 때문에 form 태그의 action과 method를 삭제 {% endcomment %}
{% comment %} form에 id값 부여해주기 {% endcomment %}
<form id="follow-form">
{% csrf_token %}
{% if request.user in person.followers.all %}
<input type="submit" value="언팔로우">
{% else %}
<input type="submit" value="팔로우">
{% endif %}
</form>
</div>
{% endif %}
<div>
<h2>{{ person.username }}님이 작성한 게시글</h2>
{% for article in person.article_set.all %}
<div>{{ article.title }}</div>
{% endfor %}
<h2>{{ person.username }}님이 작성한 댓글</h2>
{% for comment in person.comment_set.all %}
<div>{{ comment.content }}</div>
{% endfor %}
<h2>{{ person.username }}님이 좋아요한 게시글</h2>
{% for article in person.like_articles.all %}
<div>{{ article.title }}</div>
{% endfor %}
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// 2. submit 이벤트가 발생하는 form 태그 선택
const formTag = document.querySelector('#follow-form')
// 3. 선택한 form 태그에 이벤트핸들러 할당
formTag.addEventListener('submit', function (event) {
// 4. submit 이벤트의 기본 동작을 취소
event.preventDefault()
console.log(event)
})
</script>
</body>
</html>
# 서버 켜서 확인해보기
follow 버튼을 눌렀을 때, 콘솔에 event가 뜨는지
python manage.py runserver
http://127.0.0.1:8000/articles/
잘 뜨는 것을 확인할 수 있다
일단은 이벤트 발생을 감지하기만 해도 됨
'WEB > JavaScript' 카테고리의 다른 글
| [JavaScript][비동기 with Django] 4. Ajax 적용, 팔로우 버튼 (0) | 2024.04.25 |
|---|---|
| [JavaScript][비동기 with Django] 3. Ajax 적용, 팔로우 버튼 (0) | 2024.04.25 |
| [JavaScript][비동기 with Django] 0. 목표 (0) | 2024.04.25 |
| [JavaScript][비동기] then & catch의 chaining (0) | 2024.04.25 |
| [JavaScript][비동기] Promise (0) | 2024.04.25 |