Yim-HaEun

[문제 해결]AJAX 를 사용하는데도 모달창 이후, redirect가 된다? 본문

Python & Django

[문제 해결]AJAX 를 사용하는데도 모달창 이후, redirect가 된다?

Yim_Ha_Eun 2024. 11. 14. 23:51

오늘 코드를 보다가 어떤 목록의 delete 버튼을 누르면 '삭제하시겠습니까?' 모달창이 뜨고 확인.

버튼을 누르면, 페이지가 redirect로 되는것을 봤다.

교육시간에 이 이야기에 대해서 해주셔서 바로 보였다.

 

정말 간단한 문제지만, 지금 프로젝트를 보니 페이지 하나에 py 파일을 하나로 다 몰아서 작성해서

2만줄이 넘는 코드가 있다.

아니.. 관리자가 혼자였다지만 이거 관리하는것도 힘들었을거같은데  gpt 돌렸나..ㅋㅋ

프로젝트할때도 모달창이 뜨고 버튼을 누르면  redirect되는게 거슬렸었다.

학원에서 강사가 진도 못나갔다고 AJAX를 드롭해버린 ㅋ .. 학원이었지만 에휴

사실 그건 내게 변명이 안됨 그냥 알아서 배웠어야함.

 


AJAX를 사용했는데도 redirect 원인?

 

코드에 redirect를 썼기 때문!

지금 집이라 코드를 못보는데.. 여튼 이전 개발자가 ajax를 써놓고도 redirect형식을 붙여넣기한거같다.

 

Django의 views.py에서 redirect()를 사용하면 Ajax를 응답받기전에 페이지가 리다이렉트되거나 새로고침된다.

 

template html    Ajax요청 예시

$.ajax({
	url : 'delete-item', //삭제처리 url
    type: 'POST',
    data : {
    	'id' : itemId,
        'csrfmiddlewaretoken' : $('input[name="csrfmiddlewaretoken"]').val() //csrf 토큰 추가
       },
       success: function(response){
       	if(response.success){// 삭제 성공 , 모달닫기
        	$('#deleteModal').modal('hide');//모달 창 닫기
            $('#item-'+itemId).remove(); // 항목 제거
            alert('삭제되었습니다.');
        }else{
        	alert('삭제 실패');
            }
        },
        error: function(xhr, status, error){
        	alert('삭제 요청 중 오류 발생');
        }

이렇게 모달창 관련해서 설정을 두고

Django views.py(자바스프링의 controller역할과 같다.)

삭제 처리를할때, 

redirect가 아닌,

...
if request.method =='POST':
	item_id = request.POST.get('id')
    item = get_object_ot_404(Item, id=item_id)
    item.delete()
    return JasonResponse({'success': True})
return JsonResponse({'success: False'})

뭐 대충 return으로 Ajax를 부르면 된다는 소리.