Ajax don't transmit data - ajax

Question

I'm using ajax to pass data to a view for save in database.
In javascript the data look correct but in the view is null.
Read the comments in code for other questions and informations
My javascript:
...
var changed_element=[];
var changed_value=[];
document.getElementById('tabella').addEventListener('change', function(event){
...
changed_element.push(element); //list of list of string
changed_value.push(elem[elem.value].text); //list of string
...
});
document.getElementById('btn-save').addEventListener('click', function() {
console.log('changed_element', changed_element) //print the right value
$.ajax({type: 'POST',
url: '/salva-conoscenze-rapporti/',
data: {
changed_element: changed_element,
changed_value: changed_value //<= comma?
},
success: function(msg) {
console.log(msg) //prints 'It works'
document.getElementById('btn-save').style.display = 'none';
} //<= comma?
});
});
My view:
#staff_member_required
#ensure_csrf_cookie #I need this?
def salva_conoscenze_rapporti(request):
if request.is_ajax():
changed_element = request.POST.get('changed_element', None)
changed_value = request.POST.get('changed_value', None)
msg='it works'
print(changed_element) #prints None instead of array
print(changed_value)
else:
msg="it doesn't work"
return HttpResponse(msg)
My template base.html:
...
<script>
var csrftoken = $.cookie('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
</script>
...
My template:
{% extends 'base.html' %}
...
Basically print(changed_element) should gives the data instead gives None.
My MIDDLEWARE_CLASSES in settings.py:
MIDDLEWARE_CLASSES = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.locale.LocaleMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
My variables:
changed_element=[ [ "conoscenza", "Cliente1", "Cliente2" ] ];
changed_value=[ "Generale" ];
console.log(changed_element) gives: Array [ Array[3] ]

Answer 1

To get the cookie you also can use with 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;
}
var csrftoken = getCookie('csrftoken');
And then, I'll correcting your script.
// $('.btn-save').click(function() { // to simply with jquery
document.getElementById('btn-save').addEventListener('click', function() {
$.ajax({
type: 'POST',
url: '/salva-conoscenze-rapporti/',
data: {
"changed_element" : changed_element,
"changed_value" : changed_value,
"csrfmiddlewaretoken": csrftoken // from `var csrftoken;`
},
success: function(msg) {
console.log(msg) //prints 'It works'
document.getElementById('btn-save').style.display = 'none';
} //<= comma?
});
});
Or like this one:
$('.btn-save').click(function() {
var form = new FormData();
form.append('changed_element', changed_element);
form.append('changed_value', changed_value);
form.append('csrfmiddlewaretoken', getCookie('csrftoken'));
$.ajax({
type: 'POST',
url: '/salva-conoscenze-rapporti/',
data: form,
processData: false,
contentType: false,
success: function(msg) {
console.log(msg) //prints 'It works'
document.getElementById('btn-save').style.display = 'none';
}
});
});
In your views.py
from django.views.decorators.csrf import csrf_protect
#csrf_protect
#staff_member_required
def salva_conoscenze_rapporti(request):
if request.method == 'POST' and request.is_ajax():
changed_element = request.POST.get('changed_element', None)
changed_value = request.POST.get('changed_value', None)
msg = 'it works'
print(changed_element)
print(changed_value)
else:
msg="it doesn't work"
return HttpResponse(msg)
Hope it can help.