如何将Django视图返回的值传递到Ajax的success回调函数中

你的代码存在视图层、前端逻辑两部分问题，具体修改方案如下：

核心问题说明 #

• 视图逻辑缺陷：没有处理表单验证失败的分支，未定义cols变量就直接返回，会触发服务端报错；同时直接用HttpResponse返回列表数据，Django会将其转为普通字符串，前端无法直接解析为可遍历的数组
• 前端逻辑缺失：没有指定Ajax返回数据的解析格式，也没有编写DOM渲染逻辑，拿到数据后无法展示到模板页面

修复后的代码 #

视图层代码 #

from django.http import JsonResponse

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}"
            cols = get_column_names(file_url)
            form.save()
            # 返回结构化JSON数据
            return JsonResponse({"status": "success", "columns": cols})
        # 表单验证失败的兜底返回
        return JsonResponse({"status": "error", "msg": "表单验证失败"}, status=400)
    # 非POST请求的兜底返回
    return JsonResponse({"status": "error", "msg": "请求方式不合法"}, status=405)

前端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,
        dataType: 'json', // 指定返回数据为JSON格式，自动解析
        success: function (res) {
            if(res.status === 'success') {
                // 渲染列名到模板，提前在模板中添加id为column-container的DOM容器即可
                let columnHtml = '<p>CSV文件列名如下：</p><ul>';
                res.columns.forEach(col => {
                    columnHtml += `<li>${col}</li>`;
                });
                columnHtml += '</ul>';
                $('#column-container').html(columnHtml);
            } else {
                alert('操作失败：' + res.msg);
            }
        },
        error: function() {
            alert('网络请求异常，请重试');
        }
    });
    return false;
}

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

额外注意事项 #

• 模板中提前添加用于展示列名的容器，示例：<div id="column-container"></div>
• 确保get_column_names函数返回的是标准列表类型，不要返回不可序列化的对象
• Django开启CSRF防护的情况下，表单内需添加{% csrf_token %}标签，FormData会自动携带该字段完成校验

内容的提问来源于stack exchange，提问作者Sashaank