1번째 줄: |
1번째 줄: |
| == 개요 == | | == 개요 == |
− | 구글에서 개발한 비동기통신 기술.
| |
− |
| |
| 모든 데이터를 한번에 부를 필요 없이, 버튼을 누르면 해당 내용만 불러온다든가 리소스 활용면에서의 낭비를 줄이기 위한 기술이다. | | 모든 데이터를 한번에 부를 필요 없이, 버튼을 누르면 해당 내용만 불러온다든가 리소스 활용면에서의 낭비를 줄이기 위한 기술이다. |
| | | |
| 보통 JQuery의 Ajax를 이용한다. | | 보통 JQuery의 Ajax를 이용한다. |
| + | |
| + | = JQuery를 통한 사용법 = |
| + | |
| + | == 탬플릿 수정 == |
| + | {| class="wikitable" |
| + | !과정 |
| + | !설명 |
| + | !코드 |
| + | |- |
| + | |head 변경 |
| + | |head태그 안에 넣어주자. |
| + | JQuery를 사용할 수 있게끔.(static에서 쓰는 경우도 많다.) |
| + | |<syntaxhighlight lang="html+django"> |
| + | <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
| + | </syntaxhighlight> |
| + | |- |
| + | |body 변경 |
| + | |body 안의 적절한 곳에 넣어주자. |
| + | $(#submit)은 id가 submit인 엘리먼트, |
| + | |
| + | $(.submit)은 class가 submit인 엘리먼트이다. 적절하게 활용하자. |
| + | |
| + | |
| + | 뷰에서 json파싱을 위해 JSON.stringify를 사용한다. |
| + | |<syntaxhighlight lang="html+django"> |
| + | <script type="text/javascript"> |
| + | $('#submit').on('click', function(e) { |
| + | data = $('#text').val(); |
| + | $.ajax({ |
| + | type:'POST', |
| + | url:'{% url '앱:인덱스' %}}', |
| + | data:JSON.stringify(data), |
| + | success:function(json){ |
| + | console.log("data pass success",json); |
| + | }, |
| + | error : function(xhr,errmsg,err) { |
| + | console.log(xhr.status + ": " + xhr.responseText); |
| + | } |
| + | }); |
| + | }); |
| + | </script> |
| + | </syntaxhighlight> |
| + | |- |
| + | | |
| + | | |
| + | | |
| + | |} |
| + | |
| + | == 뷰 수정 == |
| + | 기본적인 뷰의 형태는 다음과 같다. |
| + | |
| + | ajax의 data 안에 사전형으로 데이터가 담기는데, 뷰에선 request.GET['이름'] 형태로 담긴 데이터를 사용할 수 있음.<syntaxhighlight lang="python"> |
| + | def likes(request): |
| + | if request.is_ajax(): # ajax인지 여부 판별 |
| + | .... |
| + | context = {'like_count' : post.like.count(), "message":message} # 보낼 데이터 담기 |
| + | return HttpResponse(json.dumps(context), content_type='application/json') |
| + | </syntaxhighlight>ajax의 success 함수 안에 response(json)이 담기는데, 안의 사전은 마찬가지로 닷 문법으로 접근할 수 있다. |
| [[분류:장고 기능구현(중급)]] | | [[분류:장고 기능구현(중급)]] |