알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)
ajax+django(csrf) 통신하기 본문
ajax+django(csrf) 통신하기
ajax는 http의 post or get 을 이용한 통신을 합니다.
우선 test할 html 파일은 django 서버에 탬플릿 폴더에 있어야 합니다.
브라우저 들이 정책상 ajax의 데이터를 서버와 같은 곳에서 호출해야 하기 때문
예를 들면 post 로 데이터를 보낼 서버의 IP 주소가 와 포트가 10.23.10.232:8888
이라고 합니다.
그때 ajax에서
url:'/polls/searchData/'
이러한 속성을 설정하는데
여기에서 url 은 http://10.23.10.232:8888/polls/searchData 을 의미하지만
다른 웹서버(예를들면 10.23.10.230:8888)에 똑같은 내용의 웹서버가 있어 http://10.23.10.230:8888/polls/searchData 으로 통신을 시도하면
url:'http://10.23.10.230:8888/polls/searchData' 설정하면
에러가 나는것입니다.
여기서는 Django 를 학습 했으니 django 기준으로 설명을 하겠습니다.
우선 Django 강의 에서 사용했던 것을 이어서 사용하겠습니다.
프로젝트 이름은 : mysite
app에 이름은 polls 으로 작성을 했었습니다. 안보신 분은 참고 해주시면 되겠습니다.
polls/views.py
def ajaxproject(request):
template = loader.get_template('polls/test6.html')
//context 는 의미 없음 그냥 쓰레기 데이터 입니다. 그냥 사전 형식 으로 변수를만들기 위해서 코딩한것입니다.
context = {'latest_question_list': "5tte"}
return HttpResponse(template.render(context,request))
polls/urls.py
urlpatterns = [
url(r'^$', views.IndexView.as_view(), name='index'),
url(r'^ajaxproject/$', views.ajaxproject, name='ajaxproject'),
]
ajax 을 사용할 페이지를 링크합니다.
polls/templates/test6.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="result"></div>
<input type="text" id="msg" />
<input type="submit" value="get result" id="getResult" />
<script>
$('#getResult').click( function() {
$.ajax({
url:'/polls/searchData/',
dataType:'json',
type:'POST',
data:{'msg':$('#msg').val()},
success:function(result){
$('#result').text(result['msg']);
}
});
})
</script>
</body>
</html>
소스를 분석 하자면 id="getResult" 는 태그를 클릭 했을때 ajax로
url:'/polls/searchData/' |
post 할 주소를 설정하고 |
type:'POST' |
데이터 전송 형식은 post |
success:function(result) |
통신에서 데이터를 받았을때 실행 하는 이벤트로써 $('#result') 를 찾아 text 내용을 변경하는것입니다. |
dataType:'json' |
json 형식으로 데이터를 받아서 처리하겠하는 것입니다. |
| data:{'msg':$('#msg').val()} | 데이터를 POST 로 보낼때 value name 을 'msg' 로 설정해서 <input type="text" id="msg" /> 내용을 보내는 것입니다. |
이제 데이터를 post 로 보낼 /polls/searchData/ app을 만들어야 합니다.
polls/views.py
from django.views.decorators.csrf import csrf_exempt
import json
def ajaxproject(request):
template = loader.get_template('polls/test6.html')
context = {'latest_question_list': "5tte"}
return HttpResponse(template.render(context,request))
@csrf_exempt
def searchData(request):
data = request.POST['msg']
context = {'msg': data,}
return HttpResponse(json.dumps(context), "application/json")여기서에서 @csrf_exempt 는 csrf 보안을 사용 하기 않겠다는 의미 입니다. 참조사이트 [ django csrf 문서 ]
그리고 크롬에서 들어가면
하지만 일반적으로 django 는 csrf 을 사용합니다.
csrf 사용하기
polls/views.py
from django.views.decorators.csrf import csrf_exempt
import json
def ajaxproject(request):
template = loader.get_template('polls/test6.html')
context = {'latest_question_list': "5tte"}
return HttpResponse(template.render(context,request))
def searchData(request):
data = request.POST['msg']
context = {'msg': data,}
return HttpResponse(json.dumps(context), "application/json")
@csrf_exempt 을 지웁니다.
polls/templates/test6.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
// using jQuery
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$(document).ready(function() {
var csrftoken = getCookie('csrftoken');
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
});
</script>
</head>
<body>
<div id="result"></div>
{% csrf_token %}
<input type="text" id="msg" />
<input type="submit" value="get result" id="getResult" />
<script>
$('#getResult').click( function() {
$.ajax({
url:'/polls/searchData/',
dataType:'json',
type:'POST',
data:{'msg':$('#msg').val()},
success:function(result){
$('#result').text(result['msg']);
console.log(result['msg'])
}
});
})
</script>
</body>
</html>
위와 같이 작성 하여야 하는데
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
// using jQuery
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$(document).ready(function() {
var csrftoken = getCookie('csrftoken');
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
});
</script>
이부분은 참조사이트 [ django csrf 문서 ] 에 이렇게 사용하라고 적혀 있으니 굳이 어렵게 분석 하지 마시고 사용하면 되겠습니다.
{% csrf_token %} 은 django 에서 csrf 을 사용하기 위해서 사용 되는 부분입니다.
이부분은 브라우저에서 봤을때
<input type='hidden' name='csrfmiddlewaretoken' value='F6cEfQTr4OUYlfxRSt4feZlMvybm0P111mSDpNzvooigzRK5xERNTddhkKDc9nwR' />
으로 알수 없는 값으로 표현 되지만 csrf 을 쓰기위한 데이터로 사용 됩니다.
통신하면 똑같은 값을 얻을수 있습니다.
'Web > JQuery' 카테고리의 다른 글
| [jQuery]애니메이션 (0) | 2017.08.25 |
|---|---|
| [jQuery ] 폼 이벤트 (0) | 2017.08.23 |
| [jQuery]엘리먼트 제어 (0) | 2017.08.23 |
| [javascript,jQuery] 이벤트란? (0) | 2017.08.23 |
| [jQuery] Chain이란? (0) | 2017.08.23 |
