알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)
javascript+django(csrf) 통신하기 본문
javascript+django(csrf) 통신하기
polls/templates/test7.html
<!DOCTYPE html>
<html>
<header>
<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>
</header>
<body>
<div id='msg'>
</div>
{% csrf_token %}
<input type="button" id="execute" value="execute" />
<script>
document.querySelector('input').addEventListener('click', function(event){
var xhr = new XMLHttpRequest();
xhr.open('POST', 'polls/searchData');
xhr.onreadystatechange = function(){
document.querySelector('#msg').innerHTML = xhr.responseText;
}<!DOCTYPE html>
<html>
<header>
<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>
</header>
<body>
<div id='msg'>
</div>
{% csrf_token %}
<input type="button" id="execute" value="execute" />
<script>
document.querySelector('#execute').addEventListener('click', function(event){
var xhr = new XMLHttpRequest();
xhr.open('POST', '/polls/searchData/');
xhr.onreadystatechange = function(){
var msg_test = document.getElementById("msg")
msg_test.textContent = xhr.responseText
}
var csrftoken = getCookie('csrftoken');
xhr.setRequestHeader("X-CSRFToken", csrftoken);
var data = "1234"
xhr.send(data);
});
</script>
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var data = '';
xhr.send(data);
}
</script>
</body>
</html>
을 넣어 적어 줍니다.
polls/views.py
from django.shortcuts import get_object_or_404, render
# Create your views here.
from django.http import HttpResponseRedirect,HttpResponse
from .models import Question,Choice
from django.urls import reverse
from django.views import generic
from django.utils import timezone
from django.views.decorators.csrf import csrf_exempt
from django.template import loader
import datetime
def ajaxproject2(request):
template = loader.get_template('polls/test7.html')
context = {'latest_question_list': "5tte"}
return HttpResponse(template.render(context,request))
def searchData(request):
data = str(datetime.datetime.now())
context = {'msg': data,}
return HttpResponse(json.dumps(context), "application/json")
polls/urls.py
from django.conf.urls import url
from . import views
app_name = 'polls'
urlpatterns = [
url(r'^searchData/$', views.searchData, name='searchData'),
url(r'^ajaxproject2/$', views.ajaxproject2, name='ajaxproject2'),
]
코드를 작성한 다음에 분석을 하겠습니다.
test7.html 의 아래 코드는 csrf의 값을 쿠키에 집어 넣고 나중에 보낼때 빼서 쓰기위해 작성된 코드입니다.
Django 사이트에서 제공하는 코드이니 분석을 해도 좋지만 그냥 쓰시는편이 마음 편할것 같습니다.
test7.html
<header>
<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>
</header>
그리고 아래 코드가 ajax통신으로 post 를 보내
xhr.open('POST', '/polls/searchData/');
/polls/searchData/ 데이터를 보내고 받을때 이벤트를 정해서 데이터를 처리해 줍니다.
경로 마지막에 꼭 / 로 붙혀서 경로 설정해야 합니다 안그러면 500번 에러가 나옵니다.
test7.html
<script>
document.querySelector('#execute').addEventListener('click', function(event){
var xhr = new XMLHttpRequest();
xhr.open('POST', '/polls/searchData/');
xhr.onreadystatechange = function(){
var msg_test = document.getElementById("msg")
msg_test.textContent = xhr.responseText
}
var csrftoken = getCookie('csrftoken');
xhr.setRequestHeader("X-CSRFToken", csrftoken);
var data = "1234"
xhr.send(data);
});
</script>
'Web > 웹브라우저 객체 API' 카테고리의 다른 글
| JSON 이란? (0) | 2017.09.02 |
|---|---|
| HTMLCollection (0) | 2017.08.30 |
| HTMLElement (0) | 2017.08.30 |
| DOM 제어대상 찾기 (0) | 2017.08.21 |
| [javascript] 창제어 (0) | 2017.08.19 |
'Web /웹브라우저 객체 API' Related Articles
more
Comments