Django/Ajax sending 'none' value to view

Question

When i send data from ajax to view in Django I am getting none in data. What seems to be the problem. Here is mycode. Where as if i remove processData: false, contentType: false, then data is printed successfully but on file it gives error.

Ajax code

<script>
  function submit_data()
  {
    var type = $('#type').val();
    var subtype = $('#subtype').val();
    var name = $('#name').val();
    var price = $('#price').val();
    var weight = $('#weight').val();
    var details = $('#details').val();
    var picture1 = $('#image1')[0].files[0];
    var picture2 = $('#image2')[0].files[0];
    var picture3 = $('#image3')[0].files[0];
    var vedio_url = $('#vedio_link').val();
    alert(picture1)

    $.ajax({
        url: '/add_record/',
        type: 'POST',
        headers: { "X-CSRFToken": '{{csrf_token}}' },
        processData: false,
        contentType: false,
        data: {
          type,
          subtype,
          name,
          price,
          weight,
          details,
          picture1,
          picture2,
          picture3,
          vedio_url,
        },
        success: function (response) {
          alert("datauploaded successfully!")
        },
         error: function(){
            alert('error')
        }
      });
  }


</script>

View code

def add_record(request):
    print("Yes i am here")
    type = request.POST.get('type')
    subtype = request.POST.get('subtype')
    name = request.POST.get('name')
    price = request.POST.get('price')
    weight = request.POST.get('weight')
    details = request.POST.get('details')
    picture1 = request.FILES.get('picture1')
    picture2 = request.FILES.get('picture2')
    picture3 = request.FILES.get('picture3')
    vedi_url = request.POST.get('vedio_url')
    print (picture1)
    print(type)
    print(request.POST)
    return JsonResponse({'message':'success'},status=200)

Error:

Yes i am here
None
None
<QueryDict: {}>

its returning none, Why is that?

Answer 1

you can do with a lot of entries please because I have a more complex problem. in my case I have 6 entries when I enter an entry I have an output in the form of a table and at the end I have to make a final request which will take into account the rows that I have selected. Excuse my English.

my js : function submit_data(){

list_fournisseurs = selectcheck();
list_entrepot = selectcheck1();
var numdoc = $('#numdoc').val();
var reference = $('#reference').val();
var reference_doc = $('#reference_doc').val();
var date_debut = $('#date_debut').val();
var date_fin = $('#date_fin').val();

var format_fournisseur = new FormData();
var format_entrepot = new FormData();
var format_numdoc = new FormData();
var format_reference = new FormData();
var format_reference_doc = new FormData();
var format_date_debut = new FormData();
var format_date_fin = new FormData();

const format = [
format_fournisseur.append('list_fournisseurs', list_fournisseurs),
format_entrepot.append('list_entrepot', list_entrepot),
format_numdoc .append('numdoc', numdoc),
format_reference.append('reference', reference),
format_reference_doc.append('reference_doc', reference_doc),
format_date_debut.append('date_debut', date_debut),
format_date_fin.append('date_fin', date_fin),
]

$.ajax({

  type : 'POST',
        url : 'fournisseur_ajax',
        data : {
          'csrfmiddlewaretoken': csrf,
          'format' : format,
        },
        //processData: false,
        success : (res) =>{
          console.log('res.data',res.data)
        },
        error : (err) =>{
          console.log(err)
        },
})

}

my view

if request.method == "POST" :

 check_list_fournisseurs = request.POST.getlist("format_fournisseur[]")            
 print("########## voici la liste ###########",check_list_fournisseurs)
 check_list_entrepot = request.POST.getlist("format_entrepot[]")
 print("########## voici la liste ###########",check_list_entrepot)
           
       
print("numdoc ",num_doc)
print("item_ref",item_ref)
print("item_doc",item_doc)
print("date_depart", date_debut)
print("date_fin",date_fin)        
           
context ={'check_list_entrepot':check_list_entrepot,"check_list_fournisseurs":check_list_fournisseurs, 'num_doc':num_doc, 'item_ref':item_ref, 'item_doc':item_doc, 'date_debut':date_debut, 'date_fin':date_fin}

return render(request,"final.html",context)

Answer 2

Ajax without files:

Your JS data element should be a dictionary, also remove processData and contentType parameters.

<!doctype html>
<html lang="en">
<head>
</head>
<body>
    <input type="text" id="name"/>
    <button type="button" id="send" onclick="submit_data()">Send<button/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
    function submit_data()
    {
        var name = $('#name').val();
        $.ajax({
            url: '/add_record/',
            type: 'POST',
            headers: { "X-CSRFToken": '{{csrf_token}}' },
            data: {
            'name': name,
            },
            success: function (response) {
            alert(response.data)
            },
            error: function(){
                alert('error')
            }
        });
    }
    </script>
</body>
</html>

views:

from django.shortcuts import render
from django.http import JsonResponse


def form_record(request):
    return render(request, "mytemplate.html", {})

def add_record(request):
    print("Yes i am here")
    name = request.POST.get('name')
    print(f"Post: {request.POST}")
    return JsonResponse({'data': name},status=200)

Ajax with files:

Because you are sending binary data you should to use FormData:

    function submit_data()
    {
        var name = $('#name').val();
        var formData = new FormData()  // changes here
        formData.append('name', name)  // and here
        $.ajax({
            url: '/add_record/',
            type: 'POST',
            headers: { "X-CSRFToken": '{{csrf_token}}' },
            contentType: false,   // and here
            enctype: 'multipart/form-data',  // and here
            processData: false,  // and here
            cache: false,
            data: formData,  // <-- carefully here
            success: function (response) {
            alert(response.data)
            },
            error: function(){
                alert('error')
            }
        });
    }

Result: