Ajax(Asynchronous JavaScript and XML, 에이잭스)는 비동기적인 웹 애플리케이션의 제작을 위해 이용하는 웹 개발 기법이다.
Ajax는 쉽게 말해 화면의 깜빡임 없이 서버에 데이터를 요청하고 다시 웹페이지에 뿌려줄 수 있는 방법입니다.
오늘 포스팅할 내용은 Django로 웹 개발을 할 때 Jquery로 Ajax를 구현하는 방법입니다.
1. Jquery를 사용하기 위한 작업
jQuery CDN
The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr
code.jquery.com
위 사이트에 가셔서 사용하고자 하는 jquery 버전의 minified를 클릭하셔서 나오는 코드를 복사하신 다음 붙여넣으면 됩니다.
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
2. Ajax 사용하기
JS파일로 이동하셔서 다음과 같은 코드를 입력하시면 됩니다.
$.ajax({
url: '/ajax_method/',
type: "POST",
dataType: "json",
data: {'send_data': 'Send this message'},
success: function(data){
console.log(data);
},beforeSend:function(){
console.log("i am waiting");
},complete:function(){
console.log("i am done");
},error: function (request, status, error) {
console.log('i am failed');
}
});url : views.py에 있는 내가 이용하고자 하는 메서드를 입력합니다. 슬래쉬(/)를 먼저 입력한 이유는 root 디렉토리에서 ajax_method를 찾기 위함입니다.
type: "POST"와 "GET" 방식이 있는데 이 차이는 https://blog.outsider.ne.kr/312 이 게시글을 보면 알겁니다 :)
GET과 POST의 차이 :: Outsider's Dev Story
다들 아시다시피 GET과 POST는 HTTP프로토콜을 이용해서 서버에 무언가를 전달할 때 사용하는 방식입니다. 웹개발자라면 당연히 알고 있어야 하는 사항이고 이걸 모르면 웹개발자체를 할 수가 없
blog.outsider.ne.kr
dataType : json으로 보낼수도 있고 이외에도 text, html, xml, jsonp, and script 이 있습니다. 저는 json이 파이썬의 dictionary 타입이랑 비슷해서 대부분 json을 사용합니다.
success : views.py에 데이터를 잘 보냈고 잘 받았다는 뜻입니다. function안에 있는 data는 ajax_method에서 return 한 데이터가 들어옵니다.
beforeSend : 이 파라미터는 써도 되고 안써도 됩니다. 말 그래도 데이터를 받기 전에 동작할 무언가를 명령하는 것인데요, 저는 주로 로딩화면을 띄울때 씁니다.
complete : 이 파라미터 역시 안써도 됩니다. 위에서 beforeSend가 데이터를 받기 전에 동작하는 것이었다면 이건 데이터를 다 수신받았을 때 하는 동작입니다. 저는 로딩화면을 닫아줄 때 사용합니다.
errors : 이 부분은 에러가 발생했을때 실행이 되는데 이 부분을 통해 어떤 것이 에러가 있었는지 확인할 수 있고 예상치 못한 에러가 발생했을 때 동작을 제어할 수 있습니다.
3. Views.py
@csrf_exempt
def ajax_method(request):
receive_message = request.POST.get('send_data')
send_message = {'send_data' : "I received"}
return JsonResponse(send_message)@csrf_exempt 는 csrf 공격에 대비하기 위해 Django에 내장된 보안 솔루션입니다. 이 코드를 입력해야 해당 메서드에서 ajax 통신을 이용할 수 있습니다.
ajax에서 key 값이 send_data인 데이터를 보냈기 때문에 request.POST.get() 안에 이 이름을 사용해야 합니다.
다시 페이지로 보낼 메시지를 dictionary 타입으로 저장한다음 return 합니다.
4. 실행 결과
이제 결과를 보겠습니다. console.log로 console창에 메시지를 띄우게 했기 때문에 F12를 눌러 개발자 도구에서 console에 들어가 보시면 다음과 같은 에러가 발생할 것입니다.
404 (Not Found)는 어떤 메서드를 찾는지 모르기 때문에 에러가 나는 것입니다. 따라서 이를 해결하기 위해 app 안에 있는 urls.py로 가셔서 다음과 같이 경로를 추가해줘야 합니다.
이렇게 하고 서버를 재가동 시키면 (Ctrl S 누르면 자동으로 재실행 됩니다.) 다음처럼 정상적으로 수신을 완료했다고 뜹니다.
간혹 500 에러가 뜰 때 있는데 이때는 datatype에서 문제가 생기는 경우가 많으니 참고하시길 바랍니다.
'Back-End' 카테고리의 다른 글
| Installation of Yarn Berry on Network Disconnected Environment (0) | 2023.06.14 |
|---|---|
| [Ubuntu] Npm install 에러 (1) | 2023.05.07 |
| PM2를 사용해 PUSH서버 구축하기 (0) | 2023.04.04 |
| 리눅스 우분투 웹서버 원격으로 관리하기 (0) | 2021.08.28 |
| Mod_wsgi를 이용해 장고 프로젝트를 리눅스 우분투, Apache 에 Deploy하기 (0) | 2021.07.14 |
