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

Posted 2023-02-24

【中文标题】如何从 Django 视图中获取价值到 Ajax 成功函数中

【英文标题】：How to get value from Django view into Ajax success function

【发布时间】：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 控制台中似乎没有记录任何内容。

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