가끔 jquery를 이용해 post 데이터를 전달 할 때 , flask 서버에서 페이지를 반환해줘야 하는 경우가 있다.
- $.ajax나 $.post등을 이용하는 경우에 페이지가 자동으로 전환되지 않음
- 따라서 success 조건에서 별도로 페이지를 새로고침 하거나 다른곳으로 연결해줘야함
- 이 경우 flask의 반환값이 필요한 경우에는 해당 반환을 무시하는 경우가 왕왕 생긴다.
ex : flash 메시지 반환이 필요한 경우
- flask에서 반환해준 flash 메시지는 세션에 저장되어 사용됨.
- 클라이언트 사이드의 자바스크립트는 세션에 접근할 수 없기 때문에 해당 값을 알 수 없음
- 따라서 페이지 자체를 새로 랜더하면서 세션에 접근하여 flash 메시지를 받아와야함.
그래서 보통 이런경우는 반환 메시지를 따로 보내고, 수신한 메시지를 사용자에게 띄워줄 텐데, post나 ajax의 결과를 페이지에 바로 랜더해주려면 (게시글이나 댓글 작성 등) 결국은 새로고침이 들어가야되고, 새로고침을 실행하면 success 조건에서 수신한 메시지를 바로바로 띄워주기에 조금 복잡한 상황이 된다.
$.ajax나 $.post를 이용하지 않는 경우라면 render_template 나 redirect 등으로 결과가 반영된 페이지를 바로바로 반영할 수 있다.
그러나 form을 사용해야 하는 약간의 수고로움이 들 수도 있고, 제이쿼리를 이용한 post 전송이 코드도 간결하고 편리한 경우가 있을 수 있기에 쉽게 포기하기는 힘든 방법.
따라서 제이쿼리로 post데이터를 보내고 flask에서 페이지를 반환하는 방법을 찾아 진행하였다.
#flask
except Exception as e:
ret['code'] = 'fail'
ret['data'] = "커스텀 쿼리 수정 실패"
else :
flash('쿼리 수정 완료')
ret = redirect(request.referrer)
return ret
서버측에서는 크게 달라질 게 없다. 실패하는 경우엔 일반적인 ajax 처럼 동작시키고, 성공하는 경우는 redirect나 render_template 등을 이용해 flash 메시지를 포함하여 일반적인 form에 대응하듯 동작하면 된다.
$.post({
url : 'QueryModify.wt',
type : 'POST',
data : Data,
success : function(res){
console.log(res)
if( res.code == "fail")
openAlertModal(0,res.data);
else
document.write(res);
},
});
제이쿼리에선 실패하는 경우는 일반적인 ajax처럼, 성공하는 경우는 **document.write()**를 사용해 반환받은 페이지를 그대로 써주는 방식을 이용하면 된다.
이러면 동작은 ajax로 했지만, 결과는 form으로 쓴 것 처럼 보이게 되고, flash 메시지도 사용할 수 있다.
다만 이렇게 하면 페이지의 결과를 현재 페이지에 그대로 덮어쓴 형태가 되기 때문에 그 이후의 동적 페이지가 정상적으로 동작하지 않을 수 있다.
따라서 저런 경우엔 ajax의 반환으로 수정된 부분만 긁어와 현재 페이지를 덮어쓰는 방법도 생각해 볼 수 있다.
#flask
except Exception as e:
elog('커스텀 쿼리 정책 데이터베이스 수정 실패 '+str(e))
ret['code'] = 'fail'
ret['data'] = "커스텀 쿼리 수정 실패"
else :
ret['code'] = 'ok'
ret['data'] = qs.customquery
return ret
$.post({
url : 'QueryModify.wt',
type : 'POST',
data : Data,
success : function(res){
console.log(res)
if( res.code == "fail")
openAlertModal(0,res.data);
else
$('#policyModal').modal('hide')
$('#ModifyPolicyModal').modal('hide')
openAlertModal(1,'쿼리 수정 성공');
$('#query'+id).text(res.data);
},
});
이러면 일반적인 ajax 함수의 동작과 동일해진다. 페이지에 일부분에만 수정한 결과를 반영하자.
참고 문서
https://stackoverflow.com/questions/27517972/flask-flash-message-no-longer-works-when-using-ajax