django wagtail에서 ajax 구현 방식

inforamtion_location_page.html 페이지 일부에 ajax를 적용하는데
클릭 이벤트에 따라 화면 중앙 부분이 비동기로 로드 된다.
이때 중앙부분은 location_details.html 이라는 파일로 만들어져 있는데
해당부분을 어떻게 inforamtion_location_page.html 에 로드시키는지 알기 위한 정리이다.

방식의 과정을 알기위한 내용이기 때문에 코드가 일부만 적혀있다.

---

프론트엔드에서 ajax 요청 방식은 여러가지가 있는데

fetch
XMLHttpRequest (XHR)
jQuery $.ajax()
Axios

방식에 따라 장단점이 있는데 gpt말로는 fetch가 최신방식이며 javascript에서 실행되는 방법이라고 한다.
근데 아무래도 대중적인 jquery방식을 쓰는게 좋지 않을까 싶긴함. axios도 좋은방식인듯?

아래는 gpt를 이용한 위 ajax요약

네, 각 AJAX 방식에 대한 간략한 설명과 장단점을 요약해 드리겠습니다.

1. fetch

설명

 

 

• 네이티브 JavaScript API로, HTTP 요청을 Promise 기반으로 처리합니다.

 

장점

 

 

• 간결한 구문: 코드가 간단하고 직관적입니다.

 

 

 

• Promise 기반: 비동기 작업을 쉽게 체인으로 연결할 수 있습니다.

 

 

 

• 네이티브 지원: 추가 라이브러리가 필요 없습니다.

 

단점

 

 

• 브라우저 호환성: 오래된 브라우저에서는 지원되지 않습니다.

 

 

 

• 기본 기능 제한: 요청 취소, 타임아웃 설정 등의 기능이 기본적으로 제공되지 않습니다.

 

 

 

• 에러 처리: 네트워크 오류만 catch로 잡히고, HTTP 오류는 수동으로 처리해야 합니다.

 

 

2. XMLHttpRequest (XHR)

설명

 

 

• 오래된 방식의 AJAX 요청을 수행하는 네이티브 JavaScript 객체입니다.

 

장점

 

 

• 광범위한 브라우저 지원: 거의 모든 브라우저에서 사용 가능합니다.

 

 

 

• 세밀한 제어: 요청의 각 단계를 세밀하게 제어할 수 있습니다.

 

 

 

• 동기 및 비동기 요청 지원: 동기 및 비동기 요청을 모두 지원합니다.

 

단점

 

 

• 복잡한 구문: 코드가 장황하고 복잡합니다.

 

 

 

• Promise 미지원: 기본적으로 Promise를 지원하지 않습니다.

 

 

 

• JSON 파싱 수동 처리: 응답을 JSON으로 파싱하는 작업을 수동으로 처리해야 합니다.

 

 

3. jQuery $.ajax()

설명

 

 

• jQuery 라이브러리에서 제공하는 AJAX 요청 메서드입니다.

 

장점

 

 

• 간편한 구문: 사용이 쉽고 직관적입니다.

 

 

 

• 자동 JSON 파싱: 응답 데이터를 자동으로 JSON으로 파싱합니다.

 

 

 

• 크로스 브라우저 호환성: 거의 모든 브라우저에서 사용 가능합니다.

 

 

 

• 다양한 기능: 타임아웃 설정, 요청 취소 등 다양한 기능을 제공합니다.

 

단점

 

 

• 추가 라이브러리 필요: jQuery 라이브러리를 로드해야 합니다.

 

 

 

• 파일 크기: jQuery 전체 라이브러리를 로드해야 하므로 파일 크기가 큽니다.

 

 

 

• Promise 미지원: 기본적으로 Promise를 지원하지 않지만, jQuery 3.0 이상에서는 Promise와 유사한 Deferred 객체를 지원합니다.

 

 

4. Axios

설명

 

 

• Promise 기반의 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js 환경에서 모두 사용 가능합니다.

 

장점

 

 

• 간편한 구문: 직관적이고 간단한 API를 제공합니다.

 

 

 

• Promise 기반: 비동기 작업을 체인으로 연결하여 처리할 수 있습니다.

 

 

 

• 자동 JSON 파싱: 응답 데이터를 자동으로 JSON으로 파싱합니다.

 

 

 

• 인터셉터 기능: 요청과 응답을 가로채고 수정할 수 있습니다.

 

 

 

• 타임아웃 및 취소 기능: 요청 타임아웃 설정과 요청 취소 기능을 지원합니다.

 

 

 

• 브라우저와 Node.js 모두 지원: 다양한 환경에서 사용할 수 있습니다.

 

단점

 

 

• 추가 라이브러리 필요: Axios 라이브러리를 설치해야 합니다.

 

 

 

• 파일 크기: fetch에 비해 파일 크기가 더 큽니다.

 

요약

 

 

• fetch: 간결하고 Promise 기반이지만, 브라우저 호환성과 기능 제한이 있습니다.

 

 

 

• XMLHttpRequest (XHR): 광범위한 브라우저 지원과 세밀한 제어가 가능하지만, 구문이 복잡하고 Promise를 지원하지 않습니다.

 

 

 

• jQuery $.ajax(): 간편한 구문과 다양한 기능을 제공하지만, jQuery 라이브러리를 로드해야 합니다.

 

 

 

• Axios: 간편한 구문과 강력한 기능을 제공하는 Promise 기반 라이브러리로, 추가 설치가 필요하지만 매우 유용합니다.

 

이 요약을 통해 각 AJAX 방식의 특징과 장단점을 쉽게 비교할 수 있습니다.

아무튼 script에서 이벤트를 통해(보통은 클릭이벤트)
ajax를 요청
urls.py에서 views와 연결하는 방식으로 보여진다...?

코드 일부를 보면

// 클릭 이벤트
tabs.forEach(tab => {
				tab.addEventListener('click', function(event) {
					event.preventDefault();
					const locationId = this.getAttribute('data-id');
					loadLocationDetails(locationId);
	
					// 클릭 시 active 클래스 변경
					tabItems.forEach(item => item.classList.remove('active'));
					this.parentElement.classList.add('active');
				});
			}



// 클릭이벤트에 포함된 함수 실행

function loadLocationDetails(locationId) {
				const pageId = "{{ page.id }}";
				// console.log('Loading location details for ID:', locationId);
	
				fetch(`/information/location-details/${pageId}/?location_id=${locationId}`, {
					headers: {
						'X-Requested-With': 'XMLHttpRequest'
					}
				})
				.then(response => {
					if (!response.ok) {
						throw new Error('Network response was not ok');
					}
					return response.json();
				})
				.then(data => {
					// console.log('Received data:', data); // JSON 데이터 구조 확인
					if (data.html) {
						// console.log('Location details loaded successfully');
						detailsContainer.innerHTML = data.html;
						// console.log('Details container updated');

// fetch (ajax) 작동

 

# fetch에 연결된 url 연결

# urls.py

urlpatterns = [
    # 다른 URL 패턴들
    path('location-details/<int:page_id>/',
         views.location_details_ajax, name='location_details_ajax'),
]

# location-details는 views의 location_details_ajax에 연결되어 있는걸 알 수 있음

# views.py
# 해당부분에 html이 location_details.html에 연결된걸 알 수 있음
def location_details_ajax(request, page_id):
    if request.headers.get('x-requested-with') == 'XMLHttpRequest':
        location_id = request.GET.get('location_id')
        if location_id:
            try:
                location_detail = InformationLocationDetail.objects.get(
                    id=location_id)
                html = render_to_string('information/includes/location_details.html', {

ajax의 promise 기능도 알아봐야할듯?