如何从 Django 视图中获取价值到 Ajax 成功函数中答案

【问题标题】：How to get value from Django view into Ajax success function如何从 Django 视图中获取价值到 Ajax 成功函数中
【发布时间】：2022-01-01 21:33:00
【问题描述】：

我有一个 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);
});

我做错了什么？

【问题讨论】：

如果你使用return JsonResponse({'cols': cols})怎么办？
@WillemVanOnsem 在警报中获取此输出[object Object]。
@Sahaank 如果你使用alert(data.cols)会怎样？
@Sahaank：使用console.log(data.cols) 进行调试可能会更好。它将打印控制台中的数据，您可以在浏览器中使用 Ctrl+Shift+I 访问这些数据。
@WillemVanOnsem 控制台中似乎没有记录任何内容。

标签： jquery django ajax django-views

【解决方案1】：

您可以使用 JsonResponse [Django-doc] 将结果作为 JSON blob 返回：

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，并且可能不会记录列表的内容。

【讨论】：