Ajax：如何在 json object 内部发送 FormData

Question

为了让您更好地理解，请考虑我的 ajax 请求：

$.ajax({
    url: '{% url "validate-upload-single" %}',
    type: "POST",
    data: JSON.stringify({
        'mainForm': Myform,
        'currentForm': 1,
    }),
    dataType: 'json', // response type

在哪里：
var Myform = new FormData( $(this)[0] );

问题是当我发送请求时，我在服务器端得到一个空的“字典”。 我使用 Django 作为我的后端

DJANGO 查看：

print('SORTING THE POST REQUEST')
body = request.body.decode('utf-8')
serialized = loads(body)
print(f'POST: {request.POST}')
print(f'Body: {body}')
print(f'Serialized: {serialized}')

结果：

SORTING THE POST REQUEST
POST: <QueryDict: {'{"mainForm":{},"currentForm":1}': ['']}>
Body: {"mainForm":{},"currentForm":1}
Serialized: {'mainForm': {}, 'currentForm': 1}

我试过$("form").serializeArray()但这只返回文本数据，文件似乎丢失了

Answer 1

我想问题出在contentType header - 它应该是'multipart/form-data' 。 检查此链接以使其与 jQuery.ajax 一起使用

Answer 2

在.js文件中，您必须添加 csrf 令牌的第一个块才能正常工作。

//Getting csrf token
var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();

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

然后你在 ajax 中使用 json，通过这里的变量“html_form”获取你想要显示的模板：

// Submit post on submit
$('#post-form').on('submit', function(event){
    event.preventDefault();
    console.log("form submitted!")  // sanity check

    //Send data to server for getting back sorted
    $.ajax({
        url: '/schedule/sort_group/',
        async: true,
        type: 'post',
        data: { //data sent with the post request
            group_field_value: $("#select_group").children("#group-option:selected").val(),
            lector_field_value: $("#select_lector").children("#lector-option:selected").attr("name"),
        },
        dataType: 'json',
        success: function (data) {
        $("#change_by_select").html(data.html_form);

        }
    });
});

在底部的views.py文件中，您需要像这样确定数据：

data['html_form'] = render_to_string('schedule/select_sort.html', context, 
request=request)
    return JsonResponse(data)

因此，我建议您将要从服务器检索的信息放入特定的另一个文件中，无论它是什么（字典或列表或其他数据结构或 html 模板）。 我希望它会有所帮助。 随意问任何问题。