为什么我收到ajax请求发送的空数据?

时间:2019-09-04 10:51:53

标签: javascript jquery django ajax file

有一个form。它具有用于上载file的字段。我submit将此表格发送,并通过ajax请求,post方法将其发送到服务器。

var frm = $('#contact_form');
frm.submit(function (e) {
    e.preventDefault();
    var data = new FormData()
    data.append('file', $('#id_file')[0].files[0]);
    $.ajax({
        beforeSend: function(jqXHR, settings) {
            jqXHR.setRequestHeader('X-CSRFToken', $('input[name=csrfmiddlewaretoken]').val());
        },
        type: frm.attr('method'),
        method: 'POST',
        url: '',
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data) {
            console.log(data)
        }
    });
    return false;
});

我正在使用formdata。我看着client-有数据。但是它们不会到达服务器(request.POST={})。可能是什么原因?

def post(self, request, *args, **kwargs):
    print(request.GET, request.FILES, request.POST)
    contact_form = ContactFormForm(request.POST, request.FILES)
    if contact_form.is_valid():
        contact_form = contact_form.save()
        file = request.build_absolute_uri('/')[:-1] + settings.MEDIA_URL + str(contact_form.file)
        return JsonResponse({})
    else:
        response = {}
        for k in contact_form.errors:
            response[k] = contact_form.errors[k][0]
        return JsonResponse({'response': response, 'result': 'error'})

标题

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,ru;q=0.8
Connection: keep-alive
Content-Length: 217843
Content-Type: false
Cookie: csrftoken=xEVnU5IVNTff6r2gft5Sn1wjf9bB0N5UAXrZ1lEsBUCeAlZZwnRBSKVbBEqirQ2K
Host: 127.0.0.1:8002
Origin: http://127.0.0.1:8002
Referer: http://127.0.0.1:8002/contacts/
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36
X-CSRFToken: MKW45AcnL9digoNWyJ4gi4pb2LVMxbBDP3sGcQ8UzaAhKiKFPDQZNNO3ogatYeyt
X-Requested-With: XMLHttpRequest

身体

------WebKitFormBoundaryALIAgAcqetpuKz4M
Content-Disposition: form-data; name="file"; filename="Screenshot from 2019-08-05 12-02-45.png"
Content-Type: image/png


------WebKitFormBoundaryALIAgAcqetpuKz4M--

1 个答案:

答案 0 :(得分:2)

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);
    }
  }
});
});

var frm = $('#contact_form');
frm.submit(function (e) {
    e.preventDefault();
    $.each($("div[class^='contact_form_']"), function(ind, value){
        $(value).hide();
        $(value).prev().css('border', 'none')
    })
    var formData = new FormData($('#contact_form')[0]);

    // Attach file
    for(var pair of formData.entries()) {
       console.log(pair[0]+ ', '+ pair[1]);
    }
    var ajax = new XMLHttpRequest();
      ajax.open("POST", '');
      ajax.send(formData);
});
相关问题