Flask 웹 페이지 화면에서 데이터가 갱신 되었을 때, 해당된 영역만 갱신을 하고 싶었다. 웹은 거의 초짜 수준이라.. 이것 저것 찾아 봤다.
맨 처음에 쓴 방식은 html template를 새롭게 하나 더 만들고, 새롭게 만든 html template에 기존 html 콘텐츠를 추가하기
아래와 같은 방식이다.
{% block %}
원래 html 영역
{% end block %}
새롭게 만든 html 영역
하지만 이 방법 역시 기존 html 영역을 나타나게 하려면 python 코드에서 정보를 다 입력해서 넘겨주어야만 했다.
return render_template('새로운 html', 기존 html 정보, 새로운 html 정보);
결국엔 전체 page 갱신과 똑같은 결과라서 결국 이 방법은 포기!
두 번째 방법은 ajax를 이용한 방법이었다. 하기 싫었지만 결국 ajax에 손을 대기로 했다.
ajax를 쓰기 위해서는 jquery 선언을 해주어야 한다. (나 같은 경우에는 좀 더 빠른 결과를 위해 내부 서버에 js를 저장한 후 상대 경로를 입력했다.)
<script src="../static/js/jquery-1.11.2.js"></script>
그런 다음 실제 jquery 짜기!!
간단하게 살펴보자면 처음 페이지가 Load되면 getData를 호출해서 해당하는 Data를 가져온 후 html에 추가한다.
위에 정의된 url : /getData는 실제 python에 mapping 되어야 하는 함수이며 아래와 같은 예제 형식을 가진다.
@app.route('/getData', methods=['POST'])
def getData():
~~~~~
return json.dumps(response)
이렇게 getData 함수를 통해 넘겨 받은 데이터를 jquery에서 파싱한 후 html을 수정하는 것이다.
여기서 html template를 이용한 방법이 추가된다. html 껍데기를 만들어 준 후, 데이터를 이용해서 알맹이를 채우는 작업인데, 처음에는 jquery template로 작업을 진행했다. 하지만 나는 django를 이용하고 있었고, json template 내부에서 어떻게 jinja를 이용해야 하는지 몰라서 완전 감을 상실하고 있었는데, 친한 지인의 도움으로 아래와 같이 해결했다.
결론적으로 python 코드에서 알맹이까지 채워진 html을 만들고, 해당 결과를 json으로 변환한 후, jquery에서 해당 json을 풀어서 원하는 위치에 위치시키는 것이다. (이게 핵심!!)
getData의 블라블라 위치에 아래와 같이 html을 채우는 코드를 추가한 후, 해당 값을 json으로 변환 했다.
render = render_template('template_list.html', info=html_data)
response.append(render)
response.append({'result': 'SUCCESS'})
return json.dumps(response)
아래는 html_template의 예제 코드이다. 즉 데이터 넣기 위한 껍데기 부분.. 중간 중간 jinja 문법을 확인할 수 있다.
{% for i in info %}
<li class="list-group-item">
<div class="checkbox">
{% if i.url %}
<H5>{{ i.seq }}. <a href="{{ i.url }}" target="_blank">{{ i.url }}</a></H5>
{% endif %}
</div>
<div class="pull-right">
<a class="label label-info label-xs" href="{{ i.url }}" target="_">ALICE</a>
{% if i.flag == 1 %}
<span class="label label-danger">FLAG</span>
{% else %}
<span class="label label-info">NORMAL</span>
{% endif %}
</div>
</li>
{% endfor %}
그런 후 jquery에서는 아래와 같은 동작을 통해 원하는 위치에 해당 html 코드를 삽입한다.
var Obj = JSON.parse(res);
$('#dataList').empty();
$('#dataList').append(Obj[0]);
데이터가 들어갈 영역을 한번 클리어(empty) 하고, 그 후에 만들어진 html를 해당 영역에 추가한다.
웹 개발이 짜증날 때도 있지만 이렇게 고생해서 결과가 나타나면 참 뿌듯해 지는 것 같다 -_-;;
