장고, Ajax 시간 출력 GET, POST 예제
글. 수알치 오상문
장고 프로젝트앱이 이미 존재한다고 가정합니다. 프로젝트앱에서 ajax_test 앱을 만듭니다.
py manage.py startapp ajax_test
다음처럼 각 파일을 설정하고(없는 파일은 생성 후 작성) 코드를 작성합니다.
[프로젝트앱/settings.py]
INSTALLED_APPS = [
# ...
'ajax_test',]
[프로젝트앱/urls.py]
from django.contrib import adminfrom django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
# ...
path('ajax_test/', include('ajax_test.urls')),
]
[ajax_test/urls.py]
from django.urls import path
from .views import *
app_name = 'ajax_test'
urlpatterns = [
path('', ajax_test1, name='ajax_test1'), # 테스트 시작 URL
path('time/', ajax_now_time, name='ajax_now_time'), # 시간 출력 응답 URL
]
[ajax_test/views.py]
from django.http import HttpResponse
from django.shortcuts import render
from django.views.decorators.csrf import csrf_exempt
import time
def ajax_test1(request):
return render(request, 'ajax_test/time.html')
# ajax 처리시 csrf token 처리는 뷰에서 해버림
@csrf_exempt
def ajax_now_time(request):
if request.method == "GET": # GET 응답
t = time.localtime()
now = "%04d/%02d/%02d %02d:%02d:%02d" %(t.tm_year, t.tm_mon, t.tm_mday, t.tm_hour, t.tm_min, t.tm_sec)
return HttpResponse(now)
elif request.method == "POST": # POST 응답
time_format = request.POST.get('format') # 요청한 format에 맞게 처리
t = time.localtime()
if time_format == "Time": # 요청 time_format이 'Time'이면 시간만 응답
now = "%02d:%02d:%02d" % (t.tm_hour, t.tm_min, t.tm_sec)
else:
now = "%04d/%02d/%02d %02d:%02d:%02d" %(t.tm_year, t.tm_mon, t.tm_mday, t.tm_hour, t.tm_min, t.tm_sec)
else:
now = "None"
return HttpResponse(now)
[ajax_test/templates/ajax_test/time.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax time</title>
</head>
<body>
<p>time : <span id="time"></span></p>
<input type="button" id="GET_btn" value="Get 요청" /><br>
<select id="format">
<option value="DayTime" selected></option>
<option value="Time"></option>
</select>
<input type="button" id="POST_btn" value="POST 요청" />
<script>
/* GET 요청 처리 */
document.querySelector('#GET_btn').addEventListener('click', function(event) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'text';
xhr.open('GET', '/ajax_test/time');
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200) {
document.querySelector('#time').innerHTML = xhr.responseText;
}
}
xhr.send();
});
/* POST 요청 처리 */
/* Ajax에서 폼 형식을 직접 전송한다. (장고 csrf 토큰 처리는 view에서 처리) */
document.querySelector('#POST_btn').addEventListener('click', function(event) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'text';
xhr.open('POST', '/ajax_test/time/');
xhr.onreadystatechange = function(){
document.querySelector('#time').innerHTML = xhr.responseText;
}
var data = "";
data += 'format=' + document.getElementById('format').value; /* data += '&' */
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);
});
</script>
</body>
</html>
[화면] 웹 초기 화면 (주소: 127.0.0.1/ajax_test/)
[화면] GET 요청 화면 (GET 버튼 클릭 후)
[화면] POST 요청 화면 (옵션에 따라 POST 응답이 달라짐)
<이상>
'Django' 카테고리의 다른 글
| 장고 ORM Cookbook (0) | 2021.11.05 |
|---|---|
| 장고 모델 ForeinkeyField의 on_delete 옵션 종류 (0) | 2021.11.04 |
| 장고 channels 채팅 서버 어떻게 만들었나? (0) | 2021.10.29 |
| 점프 투 장고 (0) | 2021.10.07 |
| 파일 업로드 암호화 / 한글명 파일 다운로드 구현 (0) | 2021.10.07 |