Как получить значение из представления Django в функцию успеха Ajax

У меня есть приложение django, в котором пользователь может загрузить файл при отправке формы. Когда файл загружен, программа получает имена столбцов из csv файла и отображает их в Django шаблоне

Это мои взгляды

def handle_new_file(request):
    if (request.method == 'POST'):
        form = NewFileForm(request.POST, request.FILES)
        
        if form.is_valid():
            csv_file = request.FILES['csv_file']

            fs = FileSystemStorage()
            file_name = fs.save(csv_file.name, csv_file)
            file_url = f"./media/file_uploads/{file_name}"
            
            print(file_name)
            print(file_url)
            
            cols = get_column_names(file_url)
            form.save()

        return HttpResponse(cols)

Хотя приведенное выше представление успешно вызывается при отправке формы, я не могу передать эти cols данные обратно в шаблон. Вот мой код Ajax

function upload(event) {
    event.preventDefault();
    var data = new FormData($('form').get(0));

    $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: data,
        cache: false,
        processData: false,
        contentType: false,
        success: function (data) {
            alert(data);
        }
    });
    return false;
}

$(function () {
    $('#new_form').submit(upload);
});

Что я делаю не так?

Вы можете использовать JsonResponse [Django-doc], где вы возвращаете результат в виде JSON-блоба:

def handle_new_file(request):
    if request.method == 'POST':
        form = NewFileForm(request.POST, request.FILES)
        
        if form.is_valid():
            csv_file = request.FILES['csv_file']

            fs = FileSystemStorage()
            file_name = fs.save(csv_file.name, csv_file)
            file_url = f"./media/file_uploads/{file_name}"
            
            print(file_name)
            print(file_url)
            
            cols = get_column_names(file_url)
            form.save()

    return JsoNResponse({'cols': cols})

тогда в вызове AJAX вы можете получить доступ к объекту с помощью:

$.ajax({
    # …
    success: function (data) {
        console.log(data.cols);
    }
});

Конечно, в реальности вы обрабатываете data.cols и, скорее всего, не регистрируете содержимое списка.

Вернуться на верх