ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 장고의 include의 차이와 사용법. jquery의 html 템플릿 load와
    카테고리 없음 2021. 4. 12. 10:15

    재사용 가능한 기능이나 파일 하나가 너무 복잡해지지 않도록 부분적으로 필요한 만큼 나누어 html을 개발하는 경우가 있다.

    이럴 때 나눈 html을 필요한 적소에 {%include 'path.html' %}로 include하여 사용할 수 있다.이때 html의 include가 안에 인자나 변수 값을 받아서 사용하는 경우 사용자가 요청한 URL로 서버(파이톤 처리 측) 처리가 되고 필요한 값을 html을 랜더링 할 때 넘겨준다. include는 이 때 python으로부터 넘겨받은 값만 사용할 수 있다.

    그러면 jquery의 Load는 어떻게 다를까.시간이 오래 걸리는 처리와 같이 페이지 로드 시 한번에 모두 처리하고 싶지 않은 처리가 있는 경우. 또는 반드시 페이지에 접속한 후 사용자의 요청에 따라 다른 정보와 다른 결과치로 페이지를 다시 표시해야 하는 경우. 페이지를 전부 로딩하거나 javascript로 다량의 html을 하드코딩하고 일부만 랜더링하는 등의 방법으로 처리하고 싶지 않은 경우.include와 같이 자기가 원하는 부분만 잘라내서 ajax로 처리를 요청하고, 그 결과값으로 미리 만들어 놓은 html만을 ajax로 습득한 결과값을 주고 include로 하고 싶은 경우가 있을 것이다. 이 때, jquery의 load를 사용하면 된다.그리고 include는 html로 다른 html을 추가 바인딩을 하면 되지만 jquery의 load는 다시 서버에 호출하여 서버처리를 한 후 html을 추가로 바인딩한다. 즉, 일부분만 추가 request하고 그 결과로 일부분만 html을 추가 바인딩하므로, 필요한 url과 views.py을 정의할 필요가 있다.

    장고 include의 사용법은 다음과 같다.

    ---- base . html ---- < body > < div > { % include ' . / sub . html ' % } < / div > < / body >

    ---- sub . html ---- < span > hahaha < / span >

    jquery의 load 사용법은 ------------base.html---------

    < body > < div id = " sub _ html _ block " > < / div > < / body >

    < script > function click _ test ( ) { // GET 형태 $ ( ' sub _ html _ block ' ) . load ( ' bind _ sub _ html ' ) // POST 방식 $ ( ' sub _ html _ block ' ) . load ( ' bind _ sub _ html ' , { ' data ' : ' hahaha ' } ) } < / script > ---- views.py ----

    def bind_sub_html(request): # .. javascript에서 context를 붙이면 post에 온다.data = { ' text ' : ' sub _ html binding is done ' } return render ( request , ' sub . html ' , data )

    ---- sub . html ---- < span > {{ text }} < / span >

    댓글

Designed by Tistory.